audioタグを使わないWebブラウザ上のMP3再生「jsmad」
jsmadはMP3ファイルを読み込んでWeb Audio APIで再生するJavaScript製のMP3デコーダー。
jsmadはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5が登場してからというもの、バイナリデータをWeb上で扱う技術をたびたび見かけるようになった。こうした特殊な技術を要するものは見ていて面白く、インパクトあるものが多い。
Web上で扱われるバイナリデータと言えば画像、音楽、動画などが多いだろう。今回は音楽だ。MP3ファイルをWebブラウザ上でデコードするライブラリ、jsmadを紹介しよう。
jsmadはMADをJavaScriptでポートして作られたソフトウェアだ。HTML5と言えばaudioタグがあるのでMP3ファイルの再生は難しくはない。だがjsmadはあえて再生部分を含めて全てJavaScriptで行っている。そのためWeb Audio APIに対応していないWebブラウザでは音楽が流れない。
再生ボタンを押して再生を開始するのはもちろん、再生中のプログレスバーですらJavaScriptで実装している。さらにMP3のIDタグを解析しているのでアーティスト名などのデータも得られる。Last.fmのデータを取得して再生したり、ローカルのMP3を読み込ませて再生することも可能だ。
MOONGIFTはこう見る
コンポーネントはとても便利だ。audioタグも配置するだけで音楽を再生してくれる。だがちょっとした修正を行おうと思っても既にラッピングされてしまっていて手が出せないのが難点だ。jsmadのようにIDタグを抜き出して外部とさらに連携させるようなことは難しいだろう。
アーティスト名で類似音楽や動画を表示したり、そもそも本家のMADのようにより高品質な音楽を再生できるようになる可能性もある。audioタグでできるから良いじゃないというのは面白くない。ハッキングして自力で再生できるようにしてしまう所にプログラマーとしての楽しさがある。