はじめてのWeb Audio API

2番目の講演はGoogleの北村英志さんによる，Web Audio APIについてです。

Web Audio APIとは，ブラウザ上で音を鳴らしたり，生成したりすることができるAPIです。現在はChromeのみに実装されています。Web Audio APIについて詳しく説明がありました。

まずはじめに，実際にWeb Audio APIを利用しているアプリが紹介されました。

Audio Visualizer in 3D

アップロードされたmp3を解析してビジュアライズしている

WebGL City

ヘリコプターの音が飛んでいる場所によって変わっていく

次にWeb Audio APIが，AudioタグやAudio Data APIとどのように違うものかが比較されました。

Audioタグは音を扱うためのマークアップです。Audio Data APIは，現在Firefoxに実装されている音を扱うAPIです。3者ともすべて音を扱うものなのですが，これらの違いを簡単に表で示すと以下のようになります。

Web Audio APIは上記の票でも言及している通り、モジュールを付け足して音を作るという点が優れています。以下のようなモジュールを組み合わせることで音が鳴るようになっているそうです。

AudioContext

基礎となるモジュール，時間管理やオーディオの出力部を持つ

AudioBuffer

音源

AudioNode

ほぼ全てのモジュールのインタフェース

AudioParam

自動化が可能なパラメータ制御を持つインタフェース

その後，デモを用いてより詳しい説明がありました。また，音とは何かについてや，波形編集手法の違い，Web Audio APIのモジュールについて等専門的な内容についての説明も行われました。

興味がある方は是非講演資料をご覧ください。

Google Fesの舞台裏とか

次に，Google Fesの舞台裏についてチームラボの栗原さんに講演いただきました。

Google Fesとは，11月1日に開催されたGoogle Developers Day 2011のigniteにて発表されたもので，ウェブ上で構築されたステージアプリケーションです。そこにアクセスしたPCやiPhoneが楽器になり，振ったりするとステージ側で音が鳴ったりアニメーションしたりするというアプリです。

こちらのサイトにアクセスすると楽器を見ることができます（動作ブラウザはChromeとiPhoneのSafariです⁠）⁠。MacBook ProならMacBook Proを振ることで音が鳴るとのこと。ステージ側のURLは公開されていなかったので残念ながら見られませんでした。

このセッションでは，このアプリを実装する時に苦悩されたことやそれらを解決した手法などが紹介されました。

このアプリの実装期間はたったの約2週間であったことに触れつつ，その実装を行う上での全体方針は以下のとおりであったことが説明されました。

高速性

振ったらすぐに反応するというような気持ちよさ

検出の工夫

振ったらどのように反応すれば楽しいか

当日の安定稼働

インフラによるスケールの容易さ

1,000人ぐらいの会場で実演するので，その規模への対応

これらの方針の落とし穴やその解決方法，工夫した点を説明していただきましたが，ここでは著者にとって特に印象的だった高速性と検出の工夫について触れたいと思います。

高速化と検出の工夫に対応するため，以下の処理が行われていたそうです。

• 楽器の音は最初の接続時にロードしておく
• 気持ちよく音を鳴らすために，振りだしのタイミングで音を鳴らす
• オブジェクトの動きを管理するタイマーは1つだけ
• 同じ画像はPaper.jsの画像のSymbol化で使い回す
• 楽器の音をキャッシュしておくことで次回のロードが早くなる
• Web Audio APIとAudioタグを用途に合わせて使い分ける

特にデモ上で様々に動く数多くのオブジェクトが，一つのタイマーで管理されているというものが驚きでした。

他の部分は講演資料や以下の講演動画をご覧ください。実際に運用する上での苦悩を見ることができるはずです。