Zenn
Open4

Webで通知音を作るとき、バックグラウンド再生を止めない方法

HTML
Web
Sound
FruitRiinFruitRiin

音声の再生として真っ先に思いつくのは
<audio src=""></audio> これを再生する方法。

Webで音声を再生しようとして出てくるのはだいたいこの方法。

const audio = new Audio(`/client-assets/sounds/${file}.mp3`);
audio.play();
FruitRiinFruitRiin

しかし、この方法では主にスマホにおいて、OSのMusicPlayerの枠で再生されてしまう。
つまり、バックグラウンドで再生しているBGMが通知音で止まってしまう。

FruitRiinFruitRiin

これは、 audioBufferを使うことで回避できる。

function getAudio(file){
	const response = await fetch(`/client-assets/sounds/${file}.mp3`);
	const arrayBuffer = await response.arrayBuffer();
	const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
}

	const gainNode = ctx.createGain();
	gainNode.gain.value = masterVolume * volume; // この辺のボリュームは適当に設定する

	const soundSource = ctx.createBufferSource();
	soundSource.buffer = await getAudio(file);
	soundSource.connect(gainNode).connect(ctx.destination);
	soundSource.start();