ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5になって、audio/videoなどマルチメディアを操作するタグが追加されました。それによってFlashなどのプラグインを使わなくともWebブラウザだけで音楽や動画が再生できるようになっています。

問題はそれらのタグは最低限の表現しか提供しておらず、より使いやすくしようと思うと独自の実装が必要と言うことでしょう。そこで今回は一例としてVesperを紹介します。

Vesperの使い方

Vesperは以下のようなHTMLタグを書きます。

<div class="audio-set">
  <audio id="player" src="music/sample.mp3" controlls="controlls" ontimeupdate="zTimeUpdate()"></audio>
  <div id="art" class="audio-art"></div>
  <div class="audio-progress">
    <span id="currenttime" class="audio-currenttime">0:00</span>
    <progress id="time" class="audio-time" value="0" max="0"></progress>
    <span id="totaltime" class="audio-totaltime">0:00</span>
  </div>
  <div class="audio-controlls">   
    <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>
  </div>
  <div class="audio-info">
    <span id="artist"></span>
    <span id="album"></span>
    <div class="waveform"></div>
  </div>
  <a href="http://firezenk.github.com/html5player/"><div class="brand">vesper</div></a>
</div>

そうすると、次のように描画されます。

アルバムアートもあったりして格好良いですよね。
アルバムアートもあったりして格好良いですよね。

mp3ファイルのタグから情報を読み取ってアルバムアート、アルバムタイトル、曲名、曲の波などが補完されます。オーディオのコントロールはJavaScriptで実行されているので自分で実装することもできます。後は音量操作くらいでシンプルなオーディオプレイヤーに仕上がっています。

VesperはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Vesper: HTML5 Audio player

FireZenk/html5player

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2