読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【HTML5】<audio>タグを使って音楽を再生/一時停止/2倍速再生してみる

<スポンサーリンク>

HTML5ではvideoタグやaudioタグを使うことで簡単にムービーや音楽の再生処理を実装できる。

1.audioタグを使ったHTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Tags Sample</title>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#play").on("click", function() {
		document.getElementById("sampleAudio").playbackRate = 1;
		document.getElementById("sampleAudio").play();
	})

	$('#playFirst').on("click", function() {
		document.getElementById("sampleAudio").currentTime = 0;
		document.getElementById("sampleAudio").playbackRate = 1;
		document.getElementById("sampleAudio").play();
	});

	$("#pause").on("click", function() {
		document.getElementById("sampleAudio").pause();
	});

	$("#daubleRate").on("click", function() {
		document.getElementById("sampleAudio").currentTime = 0;
		document.getElementById("sampleAudio").playbackRate = 2;
		document.getElementById("sampleAudio").play();
	});
});

</script>
</head>
<body>
<h2>サウンドを再生する</h2>
<hr/>
<div id="content">
	<audio id="sampleAudio">
	<source src="07-いつかのメリークリスマス.mp3">
	</audio>
</div>
<button id="play">再生</button>
<button id="playFirst">最初から再生</button>
<button id="pause">一時停止</button>
<button id="daubleRate">2倍速再生</button>
</body>
</html>

2.デモ

f:id:sho322:20140115010354j:plain
画面の「再生」を押すと普通に「いつかのメリークリスマス」が再生される。
「最初から再生」や「2倍速再生」も簡単に実装可能。

3.メソッドとプロパティ

メソッドとプロパティ 意味
play() 再生を行う
pause() 再生を一時停止する
load() ビデオやオーディオデータを読み込む
canPlayType() パラメータに指定されたMIMEタイプのメディアが再生可能かどうか。空の文字の場合は再生不可能。
currentTime 現在の再生時間。
duration 映像、オーディオデータの長さ
paused 一時停止しているかどうか。一時停止している場合はtrue
ended 最後まで再生したかどうか。最後まで再生したらtrue.
playbackRate 再生速度。2なら2倍速再生。負数なら逆再生。少数の値も指定可能。

今回はただの再生させるだけのサンプルだけど、これらのメソッドをうまいこと使ってGUIを工夫したら、

「英語を2倍速で勉強するアプリ」

みたいなのも簡単に実装できそう。

4.参考にした本

HTML5ガイドブック 増補改訂版 (Google Expert Series)

HTML5ガイドブック 増補改訂版 (Google Expert Series)

p.125からの「Video & Audioのメソッド/プロパティ」の項や、サンプルを参考にさせていただきました。