epubを勉強している過程でaudio要素を使う機会があったので、試してみたところ「楽」の一言につきましたので、ネタ的には今さら的な感じがしますが備忘録を兼ね紹介しようと思います。

動画や音楽ファイルをWeb上で扱う場合は、FlashなりMediaPlayerなりの準備をする必要があるのですが、HTML５ではファイルをaudio要素（もしくはvideo要素）で指定するだけ。超かんたん。

[js]
<audio src="hoge/hoge.mp3" autoplay="" controls="" loop=""></audio>
[/js]

• autoplay属性⇒ autoplay  もしくは autoplay=”” で自動再生を設定
• controls属性⇒ controls もしくは controls=”” で制御用のプレイヤーを表示
• loop属性⇒ loop もしくは loop=”” でループ再生を設定

（video要素も同様です。）

control属性を指定するとこんなプレイヤーが表示されます。画像はGoogle Chrome のものです。

プレイヤーはブラウザによって表示が異なるのが少し難儀ですよね。でもJavaScriptを使えば簡単な数行のコードでオリジナルのプレイヤーも実装できます。今回は再生と停止ボタンを実装してみます。

まずはHTMLの設定。定義リストを使って設定してみました。

[js]
<dl>
<dt>BGM</dt>
<dd><audio src="hoge/hoge.mp3" autoplay="" controls="" loop="" id="audio"></audio></dd>
<dd><button id="play"><img src="hoge/hoge/hoge.gif" alt="再生" /></button></dd>
<dd><button id="pause"><img src="hoge/hoge/hoge.gif" alt="停止" /></button></dd>
</dl>
[/js]

オリジナルデザインにするのでcontrol属性は指定していません。JavaScriptの判別用にaudio要素とbutton要素にそれぞれidを設定します。

JavaScriptのコードは以下を記述（外部ファイルでも直接でも可）します。

[js]
(function () {
var audio = null;
window.addEventListener("load",function() {
audio = document.getElementById("audio");

/* 再生 */
document.getElementById("play").addEventListener("click", playAudio, false);

/* 停止 */
document.getElementById("pause").addEventListener("click", pauseAudio, false);

},false);

/* 再生 */
function playAudio(evt) {
evt.target.disabled = true;
document.getElementById("pause").disabled = false;
audio.play();
}

/* 停止 */
function pauseAudio(evt) {
evt.target.disabled = true;
document.getElementById("play").disabled = false;
audio.pause();
}

})();
[/js]

id=”audio”を取得し、id=”play”・id=”pause”を振られた要素をクリックすると、playAudioもしくはpauseAudioが実行される仕組みです。すると下記のようなプレイヤーが使えるようになります。（epub縦書き用のプレイヤーだったので縦並びのボタンになりました。）

再生・停止だけではなく、音量表示・音量の上げ下げ・ミュートや再生秒数などもJavaScriptで設定できます。video要素もほとんど同じように実装できるので、プレイヤーのソーステンプレートを用意しておくと効率的になりそうです。

参考：
徹底解説HTML5マークアップガイドブック（羽田野 太巳 著）