audioの音をフェードイン・フェードアウトさせる

audioの再生時や一時停止時に音をフェードイン・フェードアウトするように実装してみます。

サンプルコード

再生時のフェードインはvolumeの値をsetInterval()で少しずつ上げて、一時停止時のフェードアウトはvolumeの値を少しずつ下げます。

HTML

<button id="play">再生</button>
<button id="pause">一時停止</button>

JavaScript

var baseVol = 0.5; // audioのベースの音量
var fadeSpeed = 1500; // フェードイン・フェードアウトのスピード

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

// audioの再生
document.getElementById('play').addEventListener('click', function() {
	audio.volume = 0;
	audio.play();
	var start_func = setInterval(function() {
		audio.volume = audio.volume + (baseVol / 100);
		if(audio.volume >= baseVol - (baseVol / 100)) {
			audio.volume = baseVol;
			clearInterval(start_func);
		}
	}, fadeSpeed * baseVol / 100);
}, false);

// audioの停止
document.getElementById('pause').addEventListener('click', function() {
	var end_func = setInterval(function() {
		audio.volume = audio.volume - (baseVol / 100);
		if(audio.volume <= (baseVol / 100)) {
			audio.volume = baseVol;
			audio.pause();
			clearInterval(end_func);
		}
	}, fadeSpeed * baseVol / 100);
}, false);

audioの音をフェードイン・フェードアウトさせるデモページ