Web Audio APIについて初めて調べていて、「とりあえず音を鳴らすにはどうしたらいいんだろう？」と思って調べても

「最小」みたいなことを謳いながら、音色を選ぶボタンがあったり周波数を選ぶスライダーがあったりして、「いや、音を鳴らすためだけにやらなきゃいけない最低限のことはどの部分なんだよ！」と思ったりしたので

探ってみました。

多分、最小はこれです。

コード

test.html

<!DOCTYPE html>
<html>
  <body>
    <script src="test.js"></script>
  </body>
<html>

test.js

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.start();

この2つのファイルを同じフォルダにおいて、test.htmlをブラウザで開くと、いきなり音がなります。

止めることは出来ません(なんですって

ブラウザかタブを閉じて下さい。止まります。

解説

申し訳程度に解説をつけます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

まず、Web Audio APIでは、あらゆることをAudioContextというオブジェクトの中で行います。なのでまずこれを作ります。

単にnew AudioContext()としていないのは、ブラウザによって対応してたりしてなかったりするからです。

Safariで鳴らさなくてもいいなら、この行はもっと短く

var audioCtx = new AudioContext();

としても大丈夫です。

window.AudioContextとwindow.webkitAudioContextのうち、動く方をとってくるために、こんな感じのコードになっています。

次いきます。

var oscillator = audioCtx.createOscillator();

oscillatorは、「音源ノード」の一種で、今回のように引数を省略した場合は440Hzのサイン波を出力します。

「ノード」というのは、イメージで言うと、点と、それをつなぐ線からなるネットワークのうちの、「点」の方のことです。

線の方は「エッジ」といったりします。

Web Audio APIでは、ノードを接続してネットワークを作るわけですね。

数学的には「有向グラフ」ということになります。まあ、点同士を矢印でつないだものと思ってくれれば大丈夫です。

oscillator.connect(audioCtx.destination);

この行で、さっき作った音源ノードoscillatorを、destinationとかいうノードに接続しています。

向きはoscillator→destinationです。

destinationというノードは、最終的な出力を表します。

音源を出力につないでるわけです。普通ですねえ。

音源を出力意外のものにつなぐことがあるんでしょうか？

結論から言うと、あります。例えば、エフェクターに繋いで音を加工することができます。このエフェクターから、さらに別のエフェクターだったり、destinationだったりに接続していくわけですね。

oscillator.start();

最後、この行で、音源のスイッチをオンにしてます。

これで音が鳴ります。

とりあえずこれで音が鳴るので、あとはこれを元にいろいろ触っていけば良いと思います。

Web Audio APIで音が鳴る最小構成は何

コード

解説