2012年2月13日月曜日

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つ作成したので,そのチェック用です.上は周波数を基準周波数と基準からの相対値で指定します.下は周波数を直接指定します.詳しくはソースを読んでいただければ幸いです.







このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿