Web Audio API が Firefox に登場

原文: “Web Audio API comes to Firefox” on July 9, 2013 by Ehsan Akhgari and Robert Nyman [Editor]

私たちは Web Audio API を Firefox に実装する作業をしばらくの間続けており、現在 Firefox Nightly および Firefox Aurora で API の基礎的なサポートを実現しました。Web Audio は音楽アプリケーション、ゲーム、さらには高度なオーディオ処理が必要なあらゆるアプリケーションを作成するために使用できる、いくつものすばらしい機能を提供します。

機能

機能の例を以下に挙げます:

オーディオ再生中に正確なタイミングでイベントを発生させるためのスケジューリング。
エコーやノイズキャンセリングなどの効果を作成するためのさまざまなオーディオフィルタ。
電子音楽を制作するための音声合成。
ゲームで音源が景色の中を動くようなエフェクトをシミュレートする、3D ポジショナルサウンド。
外部入力 (WebRTC call やデバイスに接続したギターなど) から得た音声や、WebRTC call で他者に伝送する音声に効果を適用するための、WebRTC 向け統合機能。
サウンドビジュアライザなどを作成するための、音声データの分析。

コードのサンプル

Web Audio で構築できることの、シンプルな例を以下に挙げます。あなたはゲームに取り組んでおり、プレイヤーがゲームの canvas をクリックするとすぐに銃を撃つ音を再生したいとしましょう。ネットワークの遅延やオーディオデコーダの遅延などに影響されないことを目的として、ゲームを読み込むプロセスの一部としてバッファへの音声をプリロードするため、あるいはクリックイベントを受けたときへ正確にスケジューリングするために Web Audio を使用できます。

より整ったサウンド効果を作成するため、マウスボタンを押している間はサウンドをさらにループする、またマウスボタンを押すのをやめたときにフェードアウト効果を与えることができます。以下のコード例で、これらを行う方法を示します:

// ネットワーク経由で音声ファイルを読み込む
var decodedBuffer;
var ctx = new AudioContext();
var xhr = new XMLHttpRequest();
xhr.open("GET", "gunshot.ogg", true);
xhr.responseType = "arraybuffer";
xhr.send();
xhr.onload = function() {
  // この時点で、xhr.response はエンコードされた gunshot.ogg のデータを持っています。
  // よって、まずは AudioBuffer へデコードを行いましょう。
  ctx.decodeAudioData(xhr.response, function onDecodeSuccess(buffer) {
    decodedBuffer = buffer;
  }, function onDecodeFailure() { alert('decode error!'); });
};

// ゲーム canvas の mousedown/mouseup ハンドラのセットアップ
canvas.addEventListener("mousedown", function onMouseDown() {
  var src = ctx.createBufferSource();
  src.buffer = decodedBuffer;                                      // デコード済みバッファを再生
  src.loop = true;                                                 // マウスが押されている間はループ再生
  var gain = ctx.createGain();                                     // マウスを離したときにフェードアウト効果を適用するため gain ノードを生成
  src.connect(gain);
  gain.connect(ctx.destination);
  canvas.src = src;                                                // 後で使用するため、ノードへの参照を保存
  canvas.gain = gain;
  src.start(0);                                                    // 直ちに再生を開始
}, false);
canvas.addEventListener("mouseup", function onMouseUp() {
  var src = canvas.src, gain = canvas.gain;
  src.stop(ctx.currentTime + 0.2);                                 // 200ms 後に再生を停止するよう設定
  gain.gain.setValueAtTime(1.0, ctx.currentTime);
  gain.gain.linearRampToValueAtTime(0.001, ctx.currentTime + 0.2); // 200ms 間フェードアウトを行うよう設定
}, false);

最初の WebAudio 実装と WebKit

Web Audio API は webkitAudioContext 接頭辞を使用して、Google Chrome で最初に実装されました。私たちは W3C の Audio Working Group で議論を行って、API の初期バージョンにあったいくつかの問題を修正しようとしました。一部では、この修正により webkitAudioContext をターゲットとしたコードに対する上位互換性を失わなければなりませんでした。

そのようなアプリケーションを標準 API に移行する方法のガイドがあります。また、API の変更点を自動的に処理する webkitAudioContext monkeypatch もあります。これは webkitAudioContext をターゲットにしたコードのいくつかを標準 API で動作させるのを支援できます。

Firefox の実装

Firefox では、標準 API を実装しました。あなたが Web 開発者で、Web で高度なオーディオアプリケーションを作成することに興味があるのでしたら、標準化のプロセスで API に対して施された、上位互換性がない変更点すべての意義を知るために、Porting webkitAudioContext code to standards based AudioContext を確認するととても役に立つでしょう。

現在私たちは Web Audio のサポートを、リリースを遅れさせる予期せぬ事態が発生しない限りデスクトップ版および Android 版の Firefox 24 でリリースしたいと望んでいますが、API のほとんどの部分を Nightly および Aurora ですぐに使用できます。

MediaStreamAudioSourceNode、MediaElementAudioSourceNode、OscillatorNode、PannerNode の HRTF パンといった、欠けているパーツがまだあります。私たちは今後数週間の間に Nightly および Firefox Aurora で、残る API のパーツのサポートを追加していく予定です。