iOS6から使用可能になったWeb Audio APIを試す
某プラットフォームのiOSの音声がならずいろいろ試行錯誤してみた結果
この方法でなるようになったので一応備忘録
処理のフロー的にはこんな
1,ページが開かれる
2,対象の音声をロード
3,Web Audio APIが使用できるかのチェック
※iOS6から使用が可能
4,XMLHttpRequestでmp3ファイルをバイナリで持ってくる
5,デコード
6,「再生」ボタンを押す
7,ロードしてる音声ファイルを流す
という流れになります。
sound.js
$(document).ready(function() { /** * @component */ var context; var sound_buffer = null; //onLoad window.addEventListener('load', init, false); /** * 初期化 * **/ function init() { try { context = new webkitAudioContext(); ///urlはmp3ファイルヘのパス loadSound(url); } catch (e){ //iOS5以下はアラート alert('Please increase the version of iOS'); } } /** * 音声読み込み * **/ 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(); } /** * 再生ハンドラ * **/ button.addEventListener("click", function(){ var source = context.createBufferSource(); source.buffer = sound_buffer; source.connect(context.destination); source.noteOn(0); }, false); });
これの前まではnew Audio()で音声を再生していたのですが、
Audioはかなりmobile Safariの制約がつらい。。
おそらくこの方法はこれからすたれていくと思われるので
iOSのwebアプリを作る場合はWeb Audio APIを使用した方がよさそうだぬ。。
後はリファクタリングして終わりだ!長かったぞー