リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

Web Audio API でリアルタイムミキシング


HTML5でaudioタグが追加されましたが、iOSのmobile safariでは同時に複数の音源再生ができませんでした。

そこでiOS6以降のmobile safariでも使用できるようになった、Web Audio APIを使って複数の音源を再生してみましょう。

まずは音源ファイルをブラウザにロードします。

[js]
var request = new XMLHttpRequest();
request.open("GET", "{音声ファイルのURL}", true);
request.responseType = "arraybuffer";
[/js]

ここで重要な点は responseType = "arraybuffer" とする事で、ロードするデータがバイナリデータである事を知らせる事です。

読み込み完了後、AudioContext.decodeAudioData メソッドを用いて音声データをデコードします。

[js]
var context = new webAudioContext();
context.decodeAudioData(request.response, function(buffer) {
// buffer: デコードされた音源データ
});
[/js]

このデコードした音声データを再生します。

[js]
context.decodeAudioData(request.response, function(buffer) {
// buffer: デコードされた音源データ
var source1 = context.createBufferSource();
source1.buffer = buffer;
source1.connect(context.destination);
source1.noteOn(0);
});
[/js]

ここで注意しなければならない点は source1.noteOn メソッドです。
これはiOSに限りますが、ユーザーのアクションが起点となっていなければ無視されてしまうという点です。

[js]
// 再生される
window.addEventListener("click", function(e) {
source1.noteOn(0);
});
// 再生されない
window.addEventListener("load", function(e) {
source1.noteOn(0);
}, false);

// 再生されない
window.addEventListener("click", function(e) {
setTimeout(function() {
source1.noteOn(0);
}, 1000);
});
[/js]

クリックイベントハンドラ内でもスコープ異なる場合は動作しませんので要注意です。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック