audioをJavaScriptで操作するプレーヤーを作成する

JavaScriptでaudioを操作する簡単なプレーヤーを作成してみます。

サンプルコード

HTML

操作のためのボタンを配置します。

<div class="audio-control">
	<button id="play">再生</button>
	<button id="pause">停止</button>
	<button id="prev">5秒戻る</button>
	<button id="next">5秒進む</button>
	<button id="vol-down">ボリュームを下げる</button>
	<button id="vol-up">ボリュームを上げる</button>
</div>

JavaScript

var audio = new Audio(); // audioの作成
audio.src = 'sound.mp3'; // 音声ファイルの指定
audio.volume = 0.5; // 音量の変更
audio.load(); // audioの読み込み

// 再生
document.getElementById('play').addEventListener('click', function() {
	audio.play();
}, false);

// 一時停止
document.getElementById('pause').addEventListener('click', function() {
	audio.pause();
}, false);

// 再生位置の変更
document.getElementById('prev').addEventListener('click', function() {
	audio.currentTime = audio.currentTime - 5;
}, false);
document.getElementById('next').addEventListener('click', function() {
	audio.currentTime = audio.currentTime + 5;
}, false);

// 音量の変更
document.getElementById('vol-down').addEventListener('click', function() {
	if(audio.volume >= 0.1) {
		audio.volume = audio.volume - 0.1;
	}
}, false);
document.getElementById('vol-up').addEventListener('click', function() {
	if(audio.volume <= 0.9) {
		audio.volume = audio.volume + 0.1;
	}
}, false);

JavaScriptでaudioを操作するデモページ