Audio Data API
今回は、ダウンロード状況を視覚的にだけではなく、聴覚的にも提示しようと試みました。音の再生には音声ファイルを一切使っておらず、Firefoxで先行実装されたAudio Data APIを利用しています。そのため、状況に応じたリアルタイムな音響生成が可能となりました。音声ファイルを利用していないことから、当然、アプリケーション全体のサイズを極端に小さくすることが可能になります。
本章では、Audio Data APIを使って、音高（周波数）・音長（持続時間）・音色（エンベロープなど）・音の強さ（振幅値）を変えながら、実際に音を生成していきます。
ここからは Firefox 4以上のブラウザが必要です。最新のFirefoxは公式サイトよりダウンロードが可能です。
音を鳴らそう
以下にサンプルを用意しました。ソを押すと音が流れます（本サンプルにおいて、CSSは本質では無いので割愛します）。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <script src="jquery-1.5.min.js"></script> <script src="sound_1.js"></script> <link href="sound_1.css" rel="stylesheet" /> <title>sound_1</title> </head> <body> <div id="sound">ソ</div> </body> </html>
function playSound(event) {
if (!Audio || !(new Audio()).mozSetup) {
alert("この機能は Firefox で先行導入された Audio Data API を使っており\nご利用中のブラウザには対応しておりません。");
return;
}
//サンプリングレート
var SAMPLE_RATE = 44100;
//オーディオでバイスの初期化
var audio = new Audio();
//音量 0 - 1
audio.volume = 1;
//セットアップ (下記例ではチャネル数が2でサンプリングレートが44100)
audio.mozSetup(2, SAMPLE_RATE);
//１秒分のバッファ SAMPLE_RATE x 2チャネル
var buffer = new Float32Array(SAMPLE_RATE*2);
//ソ の周波数
var freq = 391;
//波形データの生成
var k = 2* Math.PI * freq / SAMPLE_RATE;
for(var i = 0, n = buffer.length; i < n; i++){
buffer[i] = Math.sin(k * i);
}
//デバイスに書き込み
audio.mozWriteAudio(buffer);
}
$(document).ready(function(){
$("#sound").click(playSound);
});
ここでは純音という1つの周波数（基本周波数）のみで構成される音の生成を例に、コードを順に説明していきます。まず"ソ"のクリックイベントをとってplaySoundファンクションを呼びます。この中に音生成に関する記述があります。まず、利用中のブラウザにおいてAudio Data APIが利用可能かどうかを検査しています。次にここで利用するサンプリングレートを定義しています。44,100はCDでのサンプリングレートと同じです。new Audio()でオーディオデバイスを初期化し、デバイスに対してボリュームの設定やサンプリングレートの設定などを行っています。なお、ボリューム（振幅値）は0～1の間で設定が可能です。これでオーディオデバイスの準備は完了です。
次に、音の高さを決めるための周波数データを作ります。ここではパフォーマンス向上のためにFloat32Arrayを使っていますが、Arrayでも実装可能です。必要なバッファ数を確保したあと、ソの周波数に沿って波形を作っています。データが生成できれば、mozWriteAudioにバッファを渡すことで音が鳴ります。
