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の音をフェードイン・フェードアウトさせるデモページ

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] 会話の技法の代わりになるのがフェードイン/フェードアウト操作です。そのやり方がaudioの音をフェードイン・フェードアウトさせるに解説されていましたので参考にさせて頂きました。 […]

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31