「ブラウザのみで高機能なサウンド処理を実現する」

これが, Web Audio APIで可能になることの要約です. Web Audio APIによって, プラグイン (ブラウザ拡張機能) がなくても, ブラウザで動作する楽器アプリや, シーケンサー, ゲームの効果音などが作成可能になります.

百聞は一見に如かず…ということで, さっそく, Web Audio APIを利用して作成されたWebアプリケーションを使ってみましょう. 表aに, リンクを記載したのでアクセスしてみてください.

Windows環境ではChrome, Mac OS X環境ではSafariもしくはChromeをご利用ください.

いかがでしたか？ ブラウザだけで, こういったアプリケーションを作成できる時代になっています. 自分もこんなアプリを作成してみたいと思われた方に, このサイトが少しでもお役に立てればと思います.

HTML5登場以前においては, ブラウザ上でのサウンドの生成や再生は, 主にFlashなどのプラグインの役割でした. これは, Web Audio APIだけでなく, 多くのHTML5 APIに共通して言えることでしょう. Webアプリケーションのある特定の分野…すなわち, アニメーション, オーディオやムービーの再生, ソケット通信, データの永続化…
などは, ブラウザそのものの機能として提供せずに, プラグインで補うという状況が続きました. つまり, これらの機能はブラウザの拡張機能という位置づけでした.

しかしながら, このような状況を良しとしないブラウザベンダーが協力して, プラグインに頼らずにブラウザ自体で, これらの機能を有するWebアプリケーションの実行環境を提供するという動きがおきました. これがHTML5, 特にHTML5 API登場の経緯です.

そのような流れのなかで, Web Audio APIも誕生しました.

HTML5 APIで, サウンド関連のAPIはWeb Audio APIだけではありません. HTMLMediaElement, いわゆる, audioタグやvideoタグがその代表例です. サウンドを扱うというマクロな視点で見ると, HTMLMediaElementもWeb Audio APIも同じカテゴリーに属するAPIと言えます.

しかし, ミクロな視点は異なります. 一般的に, サウンドをアプリケーションで扱うと言った場合, 主に以下 (表c) の3種類のケースが考えられます.

HTMLMediaElementのターゲットは, オーディオデータの再生です (Data URLを利用することで, サウンド生成することも可能ですが… jsfx.jsはこの方法でサウンド生成しています) .

Web Audio APIのターゲットは, サウンド生成したり, オーディオデータを加工・編集したりすることです.

アプリケーションによってこの2つのAPIを使い分けます. 単純に, オーディオデータを再生するだけの場合は, HTMLMediaElementのほうが実装が簡単で使い勝手も良いです. 一方で, サウンド生成したり, オーディオデータを加工・編集したり, MATLABばりの機能をもつアプリケーションを作成したりする場合には, Web Audio APIを利用するほうが, 高度な処理をできるだけ簡単に実装できます.

Web Audio APIレベルの高機能なサウンド処理が可能なAPIとして, Audio Data APIもあります. このAPIは, HTMLAudioElement (audioタグ) の拡張として位置づけられています. Web Audio APIと仕様は大きく異なりますが, Audio Data APIでもWeb Audio APIと同じようなことができます.

Firefoxで先行実装されていましたが, (残念ながら？) 将来的にはWeb Audio APIに統一されるみたいなので, Audio Data APIは消えゆく運命にあります (FirefoxもWeb Audio APIのサポートを進めています) .

したがって, 学習効率の観点からWeb Audio APIの習得が優先的と言えるでしょう. (ちなみに, Audio Data APIの仕様はこちらで公開されています) .

Web Audio APIを利用するためには, Web Audio APIの実行環境が必要です. その実行環境となるのが, ブラウザ (に実装されているJavaScriptのエンジン) です.

しかし, どのブラウザでもOKというわけではありません. 現状, Web Audio APIを最も安定してサポートしているブラウザは, ChromeとSafari, Operaです.

ChromeはLinuxでもインストール可能ですが, ディストリビューションによっては, 上手く動作しません. Safariは, Mac OS XやiOSを利用している場合になります. 表dに安定して利用できる環境を記載します.

実行環境となるブラウザを用意したら, あとは実現したい処理をプログラミング言語で記述する必要があります. プログラミング言語選択の余地はなく, JavaScriptのみの一択です (これは, Web Audio APIだけでなく, 他のHTML5 APIでも同じです) .

JavaScriptの特徴としては,

• インタプリタ方式
• 手続き型言語
• 構造化プログラミング
• プロトタイプベースのオブジェクト指向 (Javaなどのクラスベースとは異なる)
• 無名関数やクロージャ (高階関数) など関数型プログラミングの性質

さらに, クライアントサイドJavaScriptにおいては,

• DOMの操作
• イベントドリブンプログラミング

といったことが重要になります.

JavaScriptに関してほとんど理解がない…という場合は, 上記のキーワードを中心に習得を進めてみてください. といっても, 言語仕様をきちんと理解しなければ, Web Audio APIが利用できないわけではないので, ザクっとでOKです.

Web Audio APIを利用するためには, JavaScriptによるプログラミングが必須です. しかし, このサイトの目的は, JavaScriptの言語仕様を解説することではないので, 必要に応じて他のリソースも参考にしてください.

ただ, コードを中心に解説していきますし, 動作確認をするデモも用意しています. したがって, コピー&ペーストやブラウザのディベロッパーツールなど活用しながら進めることで, それなりのアプリケーションを作成することは可能ですし, 何となく理解できると思います. JavaScript？？？と重荷に感じてしまう方でも, とりあえずこのサイトが少しでも役立ち, JavaScriptを習得するきっかけになればと思います.

まずは, 理屈よりも「作って・試して・楽しい」が最も大事だと思います. 隣りにお菓子やジュースでも用意して (XP : eXtream Programming), 気楽に進めてみてください.

以下の2点に関する知識はあればベターかなと思われることです.

サイトの目的はWeb Audio APIについて解説することですが, W3Cが公開している仕様のすべてを解説するわけではありません. さらに, Web Audio APIの仕様自体が更新されています.

JavaScriptの言語仕様の解説がサイトの目的ではないこともご了承ください.

結論として, このサイトはW3Cが公開している仕様にとって代わるものではなく, Web Audio APIの仕様の理解を補助するリファレンスサイトと位置づけてください. ちなみに, Web Audio APIの仕様はこちらです.

仕様とブラウザの実装に差異があり, 仕様では定義されているのに動作しない…ということもあります. その場合には, 開発者ツールを活用して, 実装されているプロパティやメソッドを確認してみてください.

そして, (申し訳ありませんが) 制作者自身も完璧に理解しているわけではないので, 間違いもあるかと思います. その場合には, お手数ですがコメントをいただければと思います. 制作者自身もこのサイトの作成・更新を通じてWeb Audio APIの理解を高めていければと考えています.

閲覧可能なブラウザは表eのとおりですが, デモの実行などを考えると, Web Audio APIを最も安定してサポートしているChrome (Mac OS X / Windows / Linux) を推奨します.

表e. サイト閲覧可能なブラウザ

Chrome	Firefox	Opera	Safari

このサイトの構成は以下のようになっています.

1. 1. Web Audio APIの基本処理
2. 2. エフェクター
3. 3. サウンドの視覚化
4. 4. デバイス API
5. 5. リファレンス (API検索・関連リンク)

1. Web Audio APIの基本処理を理解できれば, あとは作成したいアプリケーションに応じて, 2. エフェクターや, 3. サウンドの視覚化, 4. デバイス APIに進んでください.