Web Audio APIについて（３）「音楽データを可視化する」

HTML5

最近、Device関連のHTML5 APIが盛り上がっています。
この記事はWeb Audio APIに関する記事の続きです。

頑張ると、色々とスゴいコトもできてしまうWeb Audio API。
最終的にHTML5 Advent Calendar向けにまとめますので、まとめて読みたい方は12/7までお待ちください。

とりあえずデモ

一番簡単な「音楽データを可視化する」デモです。

  • startボタンを押すとSVG girl themeが流れます
  • 流れている音楽のTimeDomainDataがcanvas上にリアルタイムで描画されます。

これはなに？

RealTimeAnalyserNodeを使って収集した音楽データのTimeDomainDataをcanvas上に描画しています。

RealTimeAnalyserNodeはAudioContextから生成するオブジェクトですので、
例によってAudioBufferSourceNodeとAudioDestinationNodeの間に挿入する必要があります。

var context = new AudioContext();
var analyser = context.createAnalyser();
//create AudioBufferSourceNode as source.
source.connect(analyser);
analyser.connect(context.destination);

音楽データのTimeDomainDataはgetByteTimeDomainDataメソッドに引数を渡すことで取得できます。
このメソッドで取得できるTimeDomainDataは符号なしの8bitArrayですので、気をつけてください。

var timeDomainData = new Uint8Array(analyser.frequencyBinCount);
//do something
analyser.getByteTimeDomainData(timeDoainData)

あとはこのデータを使って煮るなり焼くなりお好きにどうぞということになります。
今回のデモではTimeDomainDataの配列をcanvas上にマップしています。

TimeDomainDataは数が多くなりがちなので描画する際にはrequestAnimationFrameを利用しています。
そのあたりも注目してみてください。

もう一つデモ

Web Audio APIでは前述のTimeDomainData以外にもFrequencyData(周波数データ)を取得することができます。
FrequencyDataを同じように描画すると以下のようになります。

このようにWeb Audio APIでは音楽データのさまざまなデータを取得することで、
音楽とリアルタイムに連動したコンテンツを作成することができます。

次回はAdvent Calendarの当番です。
これまで使った要素を組み合わせて、あのゲームへ捧げるオマージュを作ってみました。