ウェブサイトで音声ファイルを再生したい場合、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再生が中断して待機状態になったとき

ブラウザによって発生しないイベントもあるので注意が必要ですが、基本的にはこれらを利用すればウェブサイトで自由自在に音声メディア・動画メディアを駆使できるようになります。
ぜひお試しください。