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

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