Vesper - 格好良いデザインのHTML5音楽プレイヤー
HTML5になって、audio/videoなどマルチメディアを操作するタグが追加されました。それによってFlashなどのプラグインを使わなくともWebブラウザだけで音楽や動画が再生できるようになっています。
問題はそれらのタグは最低限の表現しか提供しておらず、より使いやすくしようと思うと独自の実装が必要と言うことでしょう。そこで今回は一例としてVesperを紹介します。
Vesperの使い方
Vesperは以下のようなHTMLタグを書きます。
<audio id="player" src="music/sample.mp3" controlls="controlls" ontimeupdate="zTimeUpdate()"></audio>
0:00
<progress id="time" class="audio-time" value="0" max="0"></progress>
0:00
<button id="play" onclick="zPlayPause()" class="audio-play"><icon>play</icon></button>
<button onclick="zStop()" class="audio-stop"><icon>stop</icon></button>
<button onclick="zMute()" class="audio-mute"><icon>volumeoff</icon></button>
<button onclick="zVolumeDown()" class="audio-vdown"><icon>volumedown</icon></button>
<button onclick="zVolumeUp()" class="audio-vup"><icon>volumeup</icon></button>
[
vesper
](http://firezenk.github.com/html5player/)
そうすると、次のように描画されます。
mp3ファイルのタグから情報を読み取ってアルバムアート、アルバムタイトル、曲名、曲の波などが補完されます。オーディオのコントロールはJavaScriptで実行されているので自分で実装することもできます。後は音量操作くらいでシンプルなオーディオプレイヤーに仕上がっています。
VesperはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。