iOS6から使用可能になったWeb Audio APIを試す

raharu(仮名)(プログラマー)
これがダイバージェンス1%の先の世界か。。。

さて、半年位前になりますが、
某プラットフォームで音声再生を試みた所既存のnew Audio()では音声が流れず、
試行錯誤した結果Web Audio APIでの再生が可能でしたので、こちらにも備忘録を残しておきます。

処理のフロー的にはこんな

1,ページが開かれる
2,対象の音声をロード
3,Web Audio APIが使用できるかのチェック
※iOS6から使用が可能
4,XMLHttpRequestでmp3ファイルをバイナリで持ってくる
5,デコード
6,「再生」ボタンを押す
7,ロードしてる音声ファイルを流す

という流れになります。

sound.js

$(document).ready(function() {
/** </div></div>
* @component
*/</span>
var context;
var sound_buffer = null;
//onLoad
window.addEventListener('load', init, false);
/** </div></div>
* 初期化
*
**/</span>
function init() {
try {
context = new webkitAudioContext();
///urlはmp3ファイルヘのパス
loadSound(url);
} catch (e){
//iOS5以下はアラート
alert('Please increase the version of iOS');
}
}
/** </div></div>
* 音声読み込み
*
**/</span>
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
//バイナリデータ
request.responseType = 'arraybuffer';
request.onload = function() {
//デコードを行う
context.decodeAudioData(request.response, function(buffer) {
//デコードした音声データを変数に入れる
sound_buffer = buffer;
});
}
request.send();
}
/** </div></div>
* 再生ハンドラ
*
**/</span>
button.addEventListener("click", function(){
var source = context.createBufferSource();
source.buffer = sound_buffer;
source.connect(context.destination);
source.noteOn(0);
}, false);
});
</pre></div></figure> new Audio()での音声再生はmobile Safariの制約がかなり厳しく、 今後はWeb Audio APIで行うのが良さそうです。