ウェブサイトで音声ファイルを再生したい場合、HTML5で単純にaudioタグを使うだけで実現できますが、今回はさらにJQueryを利用して再生と停止をコントロールする方法を紹介します。
まずはHTMLの記述です。
<audio src="sample.mp3" id="audio" pause="pause" loop="loop"></audio> <button id="btn" type="button"><span>再生</span><span>停止<span></button>
ここではわかりやすく、audioファイルにid="audio"を、制御するためのボタンを配置して id="btn"を、それぞれ付与しています。
続いてjQuery部分の記述です。
$(function () {
var audio = $("#audio").get(0);
var isPlaying = false;
$("#btn").on("click", function () {
if (isPlaying) {
audio.pause();
} else {
audio.play();
}
});
audio.onplaying = function() {
isPlaying = true;
};
audio.onpause = function() {
isPlaying = false;
};
});
これで、ボタンのオンオフで音声ファイルの再生／停止を制御できるようになります。
キモとなるのは .onplaying と .onpause の２つのイベント。
なおaudioタグ（またはvideoタグ）では以下のイベントが利用できます。
| イベント名 | 発生タイミング |
|---|---|
| oncanplay | 再生が可能になったとき |
| oncanplaythrough | 現状の速度で読み込みを続ければ途切れることなく動画を再生できるとき |
| ondurationchange | コンテンツの長さの変化を示すメタデータが読み込まれたとき |
| onemptied | メディアプレーヤーのバッファが空になったとき |
| onended | 再生終了時 |
| onloadeddata | 現在の再生位置でvideo映像の表示が可能になったとき |
| onloadedmetadata | メタデータの読み込みが完了したとき |
| onloadstart | メディアの読み込みを開始したとき |
| onpause | メディアの再生が一時停止のとき |
| onplay | メディアを再生したとき |
| onplaying | メディアを再生中のとき |
| onprogress | メディアを読み込み中のとき |
| onratechange | メディアの再生速度が変化したとき |
| onseeked | videoファイルのシーク終了時 |
| onseeking | videoファイルのシーク開始時 |
| onstalled | メディアのデータの取得に失敗したとき |
| onsuspend | ブラウザが意図的にメディアデータを取得していない状態からの復帰時 |
| ontimeupdate | videoの再生開始からの時間の更新時 |
| onvolumechange | 音量が変化したとき |
| onwaiting | video再生が中断して待機状態になったとき |
ブラウザによって発生しないイベントもあるので注意が必要ですが、基本的にはこれらを利用すればウェブサイトで自由自在に音声メディア・動画メディアを駆使できるようになります。
ぜひお試しください。
