HTML上で音楽を再生できるページを作りたいという要望があったので調べてみました。

HTML5のaudio要素を使いたかったのですが、対応していない旧IE対策や、
対応ブラウザでもデフォルトの見た目の差が大きく、デザインを揃えることに困りました。

また、.mp3や.wavなどブラウザによって対応している拡張子がばらばらで、
すべてのパターンを揃えるとなると素材の準備だけで大変です。

そこで見つけたのが、【audio.js】です。 とても便利だったので使い方を紹介します。

【audio.js】を使うときは、準備する音声ファイルはMP3だけで良いです。
MP3やaudio要素に対応していないブラウザではFlash Playerを使って音声を再生できるようにしてくれます。

【audio.js】が動作対応しているブラウザは、
IE6以上・Safari・Chrome・Firefox・Operaと幅広いです。
Flash Playerがインストールされていないブラウザだと再生できない場合もあるのでお気をつけください。

使い方

1.ダウンロードしたJSを読み込みます。

<script src="js/audio.min.js"></script>

srcにはJSを設置した場所のパスを入れます。

2.【audio.js】を使うための記述を追加します。

<script>
    audiojs.events.ready(function() {
       audiojs.createAll();
    });
</script>

上記1・2のJSの記述場所は head内でも body閉じタグ直前でも、どこでも大丈夫なようです。
一度記述しておけば、複数の再生バー設置も可能です。

3.再生バーを設置したい場所にaudioタグで記述します。

<audio src="music/sound.mp3" preload="auto"></audio>

srcには再生したい音声ファイルのパスを入れます。

これだけでデモと同じものが表示されます。

デフォルトでも良い感じの見た目になりますが、
デザインを変えたい場合は変更も可能です。

【audio.js】スタイル変更のデモページ
　
　
各パーツにクラスが指定されているので、
CSSで幅や色の調整ができ、角丸を使うと丸い再生ボタンのみにすることもできます。

preload="none"にすると再生ボタンを押してから読み込みを開始します。
環境にもよると思いますが、autoで設定していると
旧IEなどは読み込みに相当時間がかかって、ページのロードが進まないことがあったので、
設置する再生バーが多い場合は、preload="none"の方が良いかもしれません。
それでもChromeなどでは読み込み時間が気になることはありませんでした。

JSを追加すれば、再生ボタンの設置などもできるようです。
その場合はjQueryなどを使ってひと手間かける必要がありますけれど。
比較的やりやすいので、音楽を扱うページがあればお試しください。

参考にしたサイト

http://coliss.com/articles/build-websites/operation/javascript/js-audio-js.html
http://kolber.github.io/audiojs/demos/test3.html
http://qiita.com/hyper_stereo/items/ffc2c4c39a533b73b935