JavaScript: Audio（音声ファイル）が再生されないケース

JavaScriptでAudio（音声ファイル）を再生しようとして、 Audioオブジェクトを作成した後ですぐにplayメソッドを実行しても エラーが発生します。

エラーが発生するのは次のようなコードです。

let ad = new Audio("./sample.mp3");

ad.play();

警告とエラーメッセージは次の通りです。

警告「自動再生はユーザーが承認したとき、 サイト別設定で許可したとき、 またはメディアがミュートのときだけ許可されます。」

エラー「Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.」

「ユーザーの承認」が必要とありますから、 いきなり再生するのではなく、 ユーザーが「再生ボタンを押す」等の、 何らかのアクションを行った後に再生するようにすると、 この問題は解決します。

例えば次のコードでは、 HTMLで「再生」ボタンを設定し、 ボタンを押した後に音声ファイルを再生しています。 そうすると上記のエラーは発生しません。

HTML
<p><button id="go">再生</button></p>
JavaScript
let ad = new Audio("./sample.mp3");


// 再生ボタン
let elem_go = document.getElementById("go");

elem_go.addEventListener("click", function(){
	ad.play(); // 再生
}, false);
JavaScript入門