ONZE企業サイトへ

Archives
Tags

【HTML5 + jQuery】音声ファイルの再生/停止を制御するボタン

Ads by Google

ウェブサイトで音声ファイルを再生したい場合、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 の2つのイベント。
なおaudioタグ(またはvideoタグ)では以下のイベントが利用できます。

イベント名発生タイミング
oncanplay再生が可能になったとき
oncanplaythrough現状の速度で読み込みを続ければ途切れることなく動画を再生できるとき
ondurationchangeコンテンツの長さの変化を示すメタデータが読み込まれたとき
onemptiedメディアプレーヤーのバッファが空になったとき
onended再生終了時
onloadeddata現在の再生位置でvideo映像の表示が可能になったとき
onloadedmetadataメタデータの読み込みが完了したとき
onloadstartメディアの読み込みを開始したとき
onpauseメディアの再生が一時停止のとき
onplayメディアを再生したとき
onplayingメディアを再生中のとき
onprogressメディアを読み込み中のとき
onratechangeメディアの再生速度が変化したとき
onseekedvideoファイルのシーク終了時
onseekingvideoファイルのシーク開始時
onstalledメディアのデータの取得に失敗したとき
onsuspendブラウザが意図的にメディアデータを取得していない状態からの復帰時
ontimeupdatevideoの再生開始からの時間の更新時
onvolumechange音量が変化したとき
onwaitingvideo再生が中断して待機状態になったとき

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google