前の記事 ≪:HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」
次の記事 ≫:ブログのプチリニューアルに使った技術要素色々

HTML5のキャンバスと連動させて音声をビジュアライズしたデモ

2011年03月06日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Music Visualizer in HTML5 / JS with Source Code

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




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





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

関連エントリ
関連の記事検索:canvas, HTML5, 音楽, 音声
スポンサード リンク

By.KJ : 2011年03月06日 12:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)