--- title: Web Audio APIで音が鳴る最小構成は何 tags: JavaScript WebAudioAPI author: agajo slide: false --- Web Audio APIについて初めて調べていて、「とりあえず音を鳴らすにはどうしたらいいんだろう?」と思って調べても 「最小」みたいなことを謳いながら、音色を選ぶボタンがあったり周波数を選ぶスライダーがあったりして、「いや、音を鳴らすためだけにやらなきゃいけない最低限のことはどの部分なんだよ!」と思ったりしたので 探ってみました。 多分、最小はこれです。 #コード ```html:test.html ``` ```javascript:test.js var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var oscillator = audioCtx.createOscillator(); oscillator.connect(audioCtx.destination); oscillator.start(); ``` この2つのファイルを同じフォルダにおいて、`test.html`をブラウザで開くと、いきなり音がなります。 止めることは出来ません(なんですって ブラウザかタブを閉じて下さい。止まります。 #解説 申し訳程度に解説をつけます。 ```javascript var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); ``` まず、Web Audio APIでは、あらゆることを`AudioContext`というオブジェクトの中で行います。なのでまずこれを作ります。 単に`new AudioContext()`としていないのは、ブラウザによって対応してたりしてなかったりするからです。 Safariで鳴らさなくてもいいなら、この行はもっと短く ``` javascript var audioCtx = new AudioContext(); ``` としても大丈夫です。 `window.AudioContext`と`window.webkitAudioContext`のうち、動く方をとってくるために、こんな感じのコードになっています。 次いきます。 ```javascript var oscillator = audioCtx.createOscillator(); ``` `oscillator`は、「音源ノード」の一種で、今回のように引数を省略した場合は440Hzのサイン波を出力します。 「ノード」というのは、イメージで言うと、点と、それをつなぐ線からなるネットワークのうちの、「点」の方のことです。 線の方は「エッジ」といったりします。 Web Audio APIでは、ノードを接続してネットワークを作るわけですね。 数学的には「有向グラフ」ということになります。まあ、点同士を矢印でつないだものと思ってくれれば大丈夫です。 ```javascript oscillator.connect(audioCtx.destination); ``` この行で、さっき作った音源ノード`oscillator`を、`destination`とかいうノードに接続しています。 向きは`oscillator`→`destination`です。 `destination`というノードは、最終的な出力を表します。 音源を出力につないでるわけです。普通ですねえ。 音源を出力意外のものにつなぐことがあるんでしょうか? 結論から言うと、あります。例えば、エフェクターに繋いで音を加工することができます。このエフェクターから、さらに別のエフェクターだったり、`destination`だったりに接続していくわけですね。 ```javascript oscillator.start(); ``` 最後、この行で、音源のスイッチをオンにしてます。 これで音が鳴ります。 とりあえずこれで音が鳴るので、あとはこれを元にいろいろ触っていけば良いと思います。