ChromeとSafariでaudioタグを自動再生するための対策

WEB制作
ChromeとSafariでaudioタグを自動再生するための対策

以前までは、audioタグにautoplay属性を付与することで音声の自動再生が可能でしたが…

<audio autoplay id="audio">
  <source src="audio/source.mp3">
</audio>

ChromeとSafariのメディア要素（<video>, <audio>）の自動再生におけるポリシーの変更され、下記のコードのようなclickイベントを使用しないとaudioタグの自動再生ができなくなりました。

<audio autoplay id="audio">
  <source src="audio/source.mp3">
</audio>
document.addEventListener('click', audioPlay);
function audioPlay() {
  document.getElementById('audio').play();
  document.removeEventListener('click', audioPlay);
}

画面のいずれかをクリックしないと音楽が流れないのは、正直微妙です。

目次

SafariとChromeへの対策

この問題は、 iframeタグで無音ファイルを埋め込むことで解決できます。

こちらのリンクは0.5sの無音ファイルです。このようなファイルをiframeタグで埋め込むことによりファイルは無音ですがブラウザ側は音声の再生が許可されたと認識しaudioタグの自動再生も許可され、autoplayが設定されているものは、自動で再生され始めます。

<iframe src="https://raw.githubusercontent.com/anars/blank-audio/master/500-milliseconds-of-silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

参考文献