JavaScriptとHTML5を使ってサウンドをリアルタイムに生成する方法

Web Audio APIはブラウザ上でオーディオを制御するための強力なAPIです。このAPIを利用すると、オーディオソースの選択はもちろん、エフェクトの追加、オーディオの可視化、パンニング(音の定位制御)など、多彩な音声処理を実現できます。

サウンド生成の基本

サウンドを生成するには、まずAudioContextを作成し、その上でオシレーター(発振器)を利用します。オシレーターは電子的に波形を生成するモジュールで、サイン波・矩形波・のこぎり波・三角波など、さまざまな波形を指定して音を作り出せます。

なお、AudioContextはドキュメントごとに1つ作成するのが基本です。同じドキュメント内であれば、そのコンテキストを再利用して複数の音を制御できます。

コード例

以下のコードスニペットを実行すると、500Hzのサイン波が5秒間鳴ります。

// ドキュメントごとに1つのコンテキストを使用します。
// ここでは1つのドキュメントに対して1つのコンテキストを作成しています。
var context = new (window.AudioContext || window.webkitAudioContext)();

// オシレーター(発振器)を作成
var os = context.createOscillator();
os.type = 'sine'; // サイン波がデフォルト。square(矩形波)、sawtooth(のこぎり波)、triangle(三角波)も指定可能
os.frequency.value = 500; // 周波数をHz単位で設定
os.connect(context.destination); // 出力先(スピーカー)に接続

// オシレーターの再生を開始
os.start();
os.stop(context.currentTime + 5); // 現在時刻の5秒後に停止

コードのポイント

os.typeプロパティで波形の種類を変更でき、os.frequency.valueで周波数(Hz)を設定します。数値を大きくするほど高音になります。

また、os.stop(context.currentTime + 5)のように現在時刻からの相対時間を指定することで、任意のタイミングで再生を停止できます。

注意点

多くのモダンブラウザでは、ユーザーの操作(クリックやタップなど)を伴わずに音を自動再生することは制限されています。そのため、実際のWebページでは、ボタンのクリックイベントなどの中でAudioContextの生成やcontext.resume()を呼び出すのが一般的です。

この仕組みを応用すれば、電子ピアノや効果音ジェネレーター、シンセサイザーなど、インタラクティブな音声アプリケーションをJavaScriptだけで構築できます。