Web Audio APIでとりあえず音を鳴らす

Web Audio APIの中でも、AudioContextで定義されているcreateOscillator()を使って、正弦波(サイン波)で周波数が440Hzの音をとりあえず鳴らしてみます。

今回説明するソースの全体像

var AudioContext = window.AudioContext || window.webkitAudioContext,
ctx = new AudioContext();

var oscillator = ctx.createOscillator();
oscillator.connect(ctx.destination);

oscillator.start()

では細かく分けて説明します。

AudioContextのインスタンス作成

var AudioContext = window.AudioContext || window.webkitAudioContext,
ctx = new AudioContext();

今回、音を鳴らしたり、出力するために必要なAudioContextのインスタンスを作成しています。

AudioContextにベンダープレフィックスが必要なのは、Web Audio APIを触り始めた人が最初にハマりそうなところでも書いていますが、Safari(PC, モバイル共に)がまだベンダープレフィックスを必要としているためです。また、少し古いChromeを使っている人も必要になります。とはいえ、Chromeは自動アップデートされるので今後は無視できる範囲です。

OscillatorNodeの生成

var oscillator = ctx.createOscillator();

周期的な波形を生成しています。これによって生成されるOscillatorNodeが今回鳴らす音の元となるものです。ここではcreateOscillator()に引数を指定していないので、正弦波(サイン波)で440Hzの音が生成されます。

音の出力先と接続

先ほど生成した音源(正弦波で440Hzの音)と、音の出力先を示すAudioDestinationNodeを接続します。AudioDestinationNodeはAudioContextのプロパティとして、各AudioContextに一つだけ存在しています。

oscillator.connect(ctx.destination);

この入力と出力という話は、Channel up-mixing and down-mixingに詳しく書かれてそうですが、まだ内容を理解できてないです。

音を再生

生成した正弦波(サイン波)の周波数が440Hzという音を再生します。なお、connect()で音の出力先と接続する前にstart()を呼び出しても、音は再生されません。

oscillator.start()

これらをまとめたものが以下のソースになります。

var AudioContext = window.AudioContext || window.webkitAudioContext,
ctx = new AudioContext();

var oscillator = ctx.createOscillator();
oscillator.connect(ctx.destination);

oscillator.start()

また、サンプルも用意しておきました。リンク先を開くと正弦波(サイン波)の周波数が440Hzという音をいきなり再生するので注意してください。また、iOSは音が鳴らないと思います。

createOscillator()サンプル - JS Bin(音が鳴ります)