この記事は、Firefox OS Advent Calendar 2013 の 23 日目の記事です。
Web Audio API とは
Web Audio API はブラウザで音を鳴らす仕組みのひとつで、広義の HTML5 に含まれる仕様です。もともと、ブラウザで音を鳴らすといえば、audio タグや Flash がありました。Flash は良いものでしたがいかんせんお値段が高く、audio タグにも機能不足な点がありました。すなわち、空間音響や正確なタイミング操作といった、ゲームオーディオ等をつくる上での機能に制限がありました。
Web Audio API では、細やかな音声の制御ができるようになり、様々な音声加工や十分に正確なタイミングの操作ができるようになり、ぐっとウェブ上でのオーディオ表現の幅が広まりました。Google が作った指輪物語の広告サイト はオーディオ部分には Web Audio API が使われています。非常にうまく Web Audio API を使った例となっています。また、webaudioapi.com にも様々なサンプルがありますから、見てみると良いと思います。
ここでは Web Audio API に関する詳しい解説はしません。より詳しく Web Audio API について知りたい方は、HTML5 Rocks の以下の二つの記事が非常に有用だと思います。
Firefox OS で Web Audio API を使ううえでのポイント
OS のバージョン
Firefox OS アプリでゲームを作るとなると、必然的に Web Audio API を使うこととなるでしょう。Firefox OS では、バージョン 1.2 から、Web Audio API が使えるようになりました。ヤッター。1.0 や 1.1 を使っている人は、1.2 にアップデートしましょう。
AudioContext
Web Audio API を使ううえで、まずは AudioContext というものを作る必要があります。Web Audio API はまだバリバリ実装中であり、webkit 系ではベンダープレフィクスが必要となっています。すなわち、
context = new webkitAudioContext(); // webkit 系( Chrome とか)ではこっち！
context = new AudioContext(); // Firefox, FIrefox OS ではこっち！
となります。ウェブ上のサンプルコードは webkit がついているバージョンが多いです。間違うと動かないのでお気をつけください。
XMLHttpRequest で音声ファイルを取得する
Web Audio API を使っていると、クロスオリジン通信を行い、音声ファイルを読み込みたいなぁという場合が多々あると思います。こんなとき、Firefox OS では XMLHttpRequest をつくるときに以下のようにする必要があります。
var request = new XMLHttpRequest({mozSystem: true}); // yes
var request = new XMLHttpRequest(); // no
このように、mozSystem を true にしてあげてください。
また、アプリのタイプが privileged 以上の権限を持つ必要があります。
AudioPannerNode が動かない？
Web Audio API で空間音響（位置オーディオ）を実現するためのものに AudioPannerNode があります。このノードを Firefox/FIrefox OS で使おうとしたところ、
ReferenceError: AudioPannerNode is not defined
というエラーがでました。現在調査中です。
[追記] dynamis さんからコメントがありました。
Web Audio API - Firefox OS アプリプログラミング http://bit.ly/1blVkGV Firefoxは最新仕様に合わせて実装されているから初期草稿だけにあったAudioPannerNodeは存在しないよ (https://twitter.com/dynamitter/status/415092416937349120)
とのことです。ご指摘ありがとうございます。
最後に
そんなわけで、Web Audio API を使った Firefox OS アプリを鋭意実装中でございます。2014年の2月か3月の関東 Firefox OS 勉強会で発表したく存じますので、運営の皆様その時はよろしくお願い致します。
Web Audio API は、広義の HTML5 の規格の中では、割と目立たない位置にいる規格かなと思います。しかしながら、今のネイティブアプリ開発の波が一転しウェブに戻ってくる、もしくはネイティブアプリ開発が（Firefox OS のように）ウェブに近づいてくるということがありますと、Web Audio API は必ずや欠かせない存在になると考えています。興味を持ったかた、ぜひ一緒に Web Audio API を学び、楽しんでみませんか！