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

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

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

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

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

SafariとChromeへの対策

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

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

参考文献