自分はwebページやアプリに何かと音を付けたがる癖があるのですが、音声の再生時にちょっと困るChromeの仕様があったので共有しておきます。
エラー内容
１時間ごと（０分０秒時点）に鳩の鳴き声がする鳩時計のアプリを作ってたんですが、音が鳴るときと鳴らない時があり困っていました。
原因を探って1時間ぐらい無駄にしましたが（時間帯か？とかよくわからんことを考えてた）、検証ツールのコンソールを見たらしっかりエラーが出てました。はじめから検証ツールを見るようにしましょう。
エラー文は以下の通りでした。
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
ユーザーが最初にドキュメントを操作しなかったから、play()が失敗したとのこと。
つまり何かしらの操作をユーザー側で行わないと、音声の自動再生が行われないということですね。これまで自動再生できていた時はクリックか何かを自分が行っていたということでしょう。
また、Chromeの自動再生ポリシーにはこんな記述がありました。日本語訳すると以下の通りです。
Chrome の自動再生ポリシーはシンプルです。
- ミュートされた自動再生は常に許可されます。
- 次の場合、音声付きの自動再生が許可されます。
・ユーザーがクリック、タップなどの操作を行った。
・ユーザーが以前に音声付メディアを再生した場合
・ユーザーはモバイルのホーム画面にサイトを追加したか、デスクトップにPWA をインストールしました。 - 上位フレームは自動再生許可をiframe に委任して、サウンド付きの自動再生を許可できます。
対策
ページを開いたユーザーに何かしらの操作をさせるように促すことが確実な対策になります。
「このページは音声が鳴ります」みたいなウインドウを表示しているwebページはたまに見かけますね。
まとめ
Chromeで音声が自動再生されなかった原因と対策でした。
最初は不便な制限だなーと思いましたが、サイト開いたとたんに爆音で音楽が鳴るページとか昔はあった気がするので、そういうものを防ぐためにはいいのかもしれません。