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

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)

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2