別タブを開いたときに音声を停止する

audioで音声再生中に別タブを開いたりブラウザを最小化した時に、音声意を停止させる方法をメモ。

サンプルコード

visibilitychangeでタブの表示状態が変更されたときに処理を行えるようです。

JavaScript

var audio = new Audio();
audio.src = 'sound.mp3';
audio.autoplay = true;
audio.loop = true;

// audioを再生しているタブの表示が変更されたとき
document.addEventListener('visibilitychange', function(){
	if(document.visibilityState === 'hidden') {
		audio.pause();
	}else if(document.visibilityState === 'visible') {
		audio.play();
	}
}, false);

audio.load(); // audioの読み込み

別タブを開いたときに音声を停止するデモページ
　

【参考サイト】

• HTML5のAudioとスマホ | ツクメモ – ウェブやアプリをツクるヒトのメモ