はじめに
audioによる自動再生（Javascriptによる再生も含む）について調査しました。
videoタグについても同様かと思いますが、ここではaudioをターゲットにしています。
自動再生について
自動再生には、audioタグにautoplay属性を付与する方法と、Javascriptから再生する方法があります。
<audio src="/path/to/audio.mp3" autoplay id="audio">
document.getElementById("audio").play()
自動再生の条件
Chromeのバージョンが70より前は、特に条件なく上記の書き方で問題なく再生されます。
ただ、70以降は別の対応が必要になります。これはメディアに関するChromeのセキュリティポリシーが変更になったためです。
まず、Googleが公開しているページを参考に、自動再生するための条件についてみていきます。
- ミュートになっている
- ユーザがサイトに対して操作（クリック、タップ、キー押下）を行う
- MEI（メディアエンゲージメントインデックス）が閾値を超えている
- PWAアプリとしてインストールされている
- iframeタグで自動再生ポリシーを委任している
ミュートになっている
audioは音声のみのため、ミュートにすることはないと思うので、この対応は現実的ではありません。
ユーザがサイトに対して操作（クリック、タップ、キー押下）を行う
ページ表示後にユーザがページのいずれかをクリックまたは、タップなどを行った場合はユーザが意図的に閲覧していると解釈され自動再生が可能になります。
MEI（メディアエンゲージメントインデックス）が閾値を超えている
簡単に言うと、メディアコンテンツメインのページであることです。具体的に指標を見てみます。
- メディア（オーディオ/ビデオ）の再生時間は7秒より長くなければなりません。
- 音声が存在し、ミュートされていない必要があります。
- ビデオのあるタブがアクティブです。
- ビデオのサイズ（ピクセル単位）は200x140より大きくする必要があります。
上記を見る限り、音声のみだと閾値を超えるのは難しそうです。
PWAアプリとしてインストールされている
該当ページがPWA対応されており、かつユーザがPWAアプリをインストールした場合です。
非PWAから対応するにはコストがかかりますし、ユーザがインストールしてくれるとは限りません。
iframeタグで自動再生ポリシーを委任している
以下のような記述によって、自動再生ポリシーが適用できます。
<iframe src="/path/to/dummy.mp3" allow="autoplay" style="display:none"/>
ここまで自動再生の条件をみてきましたが、フロントのみで対応可能なのは、iframeを利用することだと思います。
挙動確認
| バージョン | iframeの有無 | 自動再生 |
|---|---|---|
| 69以前 | 無 | ○ |
| 70〜76 | 有 | ○ |
| 78以降 | 有 | × |
この結果が表すものは、78以降はiframeによる自動再生ポリシーも通用しないということです。
対策
ページ表示後にダイアログを表示させるなど、ユーザにアクションさせるように促すしかないと思います。または、本当にここで音声を自動再生させるべきか検討し直した方がいいかもしれません。
他に対策があれば、コメント等で教えていただけると幸いです。
同一オリジン内の画面遷移で表示した場合は、自動再生されます。