レポート

「第24回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 3 分

はじめての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者ともすべて音を扱うものなのですが,これらの違いを簡単に表で示すと以下のようになります。

 AudioタグAudio Data APIWeb Audio API
音声ファイルの再生
音の生成×
用途BGMのような長く再生するもの効果音のような正確なタイミングが重要なもの効果音のような正確なタイミングが重要なもの
音の編集方法×波形を計算しAPIに渡す元の音には手を加えず,出力するまでの間にモジュールを足す

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タグを用途に合わせて使い分ける

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

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

著者プロフィール

井原雄太郎(いはらゆうたろう)

東京工科大学大学院,田胡研究室所属の修士2年。

「HTML5とか勉強会」のスタッフ,主に雑用とたまにレポート記事を担当。Web系男子を目指す1987年生まれ。

主に使う言語はJavaとJavaScript。

twitter:@yutaro_i