Music Visualizer in HTML5 / JS with Source Code

HTML5のキャンバスと連動させて音声をビジュアライズしたデモ
Windows Media Player とかを使ってるとよくあるあの動くやつをHTML5のCanvasを使ってやるものです。
ベースにはEasel.jsというものが使われており、HTML5のキャンバス描画を行っているそう。




直接的にHTML5からオーディオのボリュームデータは読めないため、データを一旦テキストにしてそれを読み込むことで実現しているそう。
実際のデモを見るのが一番いいですね。デモページ　デモページその２





バックグラウンドの音声もかっこいいわけなのですが、描画される映像もかなりかっこいいです。

関連エントリ

• HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」
• HTML5のCanvasによって画像加工が出来る「CamanJS」