Web Audio API - Firefox OS アプリプログラミング


この記事は、[Firefox OS Advent Calendar 2013](http://www.adventar.org/calendars/103) の 23 日目の記事です。

## Web Audio API とは

Web Audio API はブラウザで音を鳴らす仕組みのひとつで、広義の HTML5 に含まれる仕様です。もともと、ブラウザで音を鳴らすといえば、`audio` タグや Flash がありました。Flash は良いものでしたがいかんせんお値段が高く、`audio` タグにも機能不足な点がありました。すなわち、空間音響や正確なタイミング操作といった、ゲームオーディオ等をつくる上での機能に制限がありました。

Web Audio API では、細やかな音声の制御ができるようになり、様々な音声加工や十分に正確なタイミングの操作ができるようになり、ぐっとウェブ上でのオーディオ表現の幅が広まりました。[Google が作った指輪物語の広告サイト](http://middle-earth.thehobbit.com/) はオーディオ部分には Web Audio API が使われています。非常にうまく Web Audio API を使った例となっています。また、[webaudioapi.com](http://webaudioapi.com/) にも様々なサンプルがありますから、見てみると良いと思います。

ここでは Web Audio API に関する詳しい解説はしません。より詳しく Web Audio API について知りたい方は、HTML5 Rocks の以下の二つの記事が非常に有用だと思います。

+ [Web Audio API の基礎](http://www.html5rocks.com/ja/tutorials/webaudio/intro/)
+ [Web Audio API を使用したゲーム用音声の開発](http://www.html5rocks.com/ja/tutorials/webaudio/games/)


## 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 系ではベンダープレフィクスが必要となっています。すなわち、

```javascript
context = new webkitAudioContext();  // webkit 系( Chrome とか)ではこっち！
context = new AudioContext(); // Firefox, FIrefox OS ではこっち！
```

となります。ウェブ上のサンプルコードは `webkit` がついているバージョンが多いです。間違うと動かないのでお気をつけください。

### XMLHttpRequest で音声ファイルを取得する

Web Audio API を使っていると、クロスオリジン通信を行い、音声ファイルを読み込みたいなぁという場合が多々あると思います。こんなとき、Firefox OS では `XMLHttpRequest` をつくるときに以下のようにする必要があります。

```javascript
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 勉強会](http://atnd.org/events/44739)で発表したく存じますので、運営の皆様その時はよろしくお願い致します。

Web Audio API は、広義の HTML5 の規格の中では、割と目立たない位置にいる規格かなと思います。しかしながら、今のネイティブアプリ開発の波が一転しウェブに戻ってくる、もしくはネイティブアプリ開発が（Firefox OS のように）ウェブに近づいてくるということがありますと、Web Audio API は必ずや欠かせない存在になると考えています。興味を持ったかた、ぜひ一緒に Web Audio API を学び、楽しんでみませんか！

## 参考文献

+ [W3C Working Draft - Web Audio API](http://www.w3.org/TR/webaudio/)
+ [MDN - Web Audio APi](https://developer.mozilla.org/ja/docs/Web_Audio_API)
+ HTML5 Rocks
	+ [Web Audio API の基礎](http://www.html5rocks.com/ja/tutorials/webaudio/intro/)
	+ [Web Audio API を使用したゲーム用音声の開発](http://www.html5rocks.com/ja/tutorials/webaudio/games/)
	+ [位置情報オーディオと WebGL の統合](http://www.html5rocks.com/ja/tutorials/webaudio/positional_audio/)
+ [webaudioapi.com](http://webaudioapi.com/)
+ [Firefox に Web Audio API が採用され、Web が完全なゲームプラットフォームになりました - Mozilla Japan ブログ](http://www.mozilla.jp/blog/entry/10338/)
+ [Can I use - Web Audio API](http://caniuse.com/#feat=audio-api)
+ [OREILLY, Web Audio API - Boris Smus](https://www.oreilly.co.jp/books/9784873116419/)