HTML5で音楽ファイルを扱うことができるようになりましたが、素の状態では殆どUIが提供されていません。そんな状態で提供しても全く魅力的ではないでしょう。別途UIを作り込む必要があります。 今回紹介するオープンソースソフトウェアはAmplitude.js、HTML5のオーディオプレイヤーです。これを使えば格好良いUIで提供できるでしょう。

Amplitude.jsの使い方

上の再生部分がプレイヤーになります。

マウスオーバーで再生、停止に表示が変わります。

こんな感じです。

サムネイルだけでなく、アルバムの拡大表示もできます。

プレイリストにも対応。

SoundCloudも再生できます。

ビジュアライズも。

シンプルも良いですが、もっとリッチなプレイヤーにもできます。

Amplitude.jsを使えばリッチで使い勝手の良いHTML5のオーディオプレイヤーが簡単に提供できるようになります。もちろんAPIも備えているので、プログラミング連携も容易でしょう。Amplitude.js自体は外部のJavaScriptライブラリに非依存です。

Amplitude.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Open Source HTML5 Audio Player - Amplitude.js 521dimensions/amplitudejs: A Javascript library that allows you to control the design of your media controls in your webpage – not the browser. No dependencies (jQuery not required)