Audio Data APIのサンプル

JavaScriptでサウンド合成

HTML5のおかげでFlashが不要になると言われています．では，これまでFlashを使わなければならなかった用途に何があるでしょうか？グラフィックス描画，フォント，アニメーション，通信などがメジャーなところですが，それ以外にもサウンド出力があります．合成した波形を音として出力する機能は，特に欲しい機能でした．厳密には，Javaでも合成サウンドの出力は可能だったのですが，それだけのためにJavaを使う人は私以外にいないはずなので，Flashの独壇場と言えるでしょう．

ところが，HTML5の旗印のもと，様々な機能がJavaScriptから利用できる時代になりました．Firefoxに実装された，Audio Data APIもその一つです．Audio Data APIとは何かと言うと，合成した波形を音として出力するAPIです．と言う訳で，今回はAudio Data APIを利用して，簡単な合成音を鳴らしてみたいと思います．

Audio Data API入門

Audio Data APIは非常にシンプルなAPIです．音を扱うAPIとして，Webkit系に実装されているWeb Audio APIも存在して，一括りにされることが多いのですが，狙いが全く異なります．Web Audio APIは，音源位置を指定したり，FFTしたり，一定間隔でバッファに記録する機能を持つなど，様々な機能を持っています．よって，これら2つのAPIは，別物と捉えておいたほうがすっきりします．

ではAudio Data APIの使い方ですが，必要な手順は5つです．

1. Audioのインスタンス作成

2. 1で作成したオブジェクトにチャンネル数とサンプリングレートを設定

3. Float32Arrayのインスタンスを生成し，波形データを生成

4. 3で生成したオブジェクトを1で生成したオブジェクトと結びつける

5. 再生する

言葉にするとイメージが掴みづらい箇所もありますが，手順としてはシンプルです．それでは実際のコードで見てみましょう．

Audio Data APIのサンプル

Firefox限定ですが，実際に耳で確かめてください．以下のボタンをクリックすると，ボタンに書いてある周波数の音を再生します．上3つと下3つは，鳴らすためのパラメータ指定方法を2つ作成したので，そのチェック用です．上は周波数を基準周波数と基準からの相対値で指定します．下は周波数を直接指定します．詳しくはソースを読んでいただければ幸いです．

ツイート