オーディオ再生時にUncaught (in promise) DOMExceptionが発生する

Question

前提・実現したいこと

javascriptでaudio要素を使って音声を再生したいのですが、Uncaught (in promise) DOMExceptionというエラーが出てしまいます。

最初はロードの問題だと思ったのですが、こちらの記事にあったオーディオのロードが完了してから再生するというコードの、urlの部分に用意したmp3ファイルを指定して実行してみたのですが、同じくUncaught (in promise) DOMExceptionが発生してしまいました。解決方法を教えていただきたいです。

該当のソースコード

// オブジェクトを生成します
var url = "http://example.com/hogehoge.mp3";
var audio = new Audio(url);

// 実体ファイルをロードします。
audio.load();

// readyStateからロード状態を判断します。
if (audio.readyState === 4) {
  audio.play();
} else {
  // 再生可能状態でなければ再生可能状態になった時のイベント通知をセットします
  audio.addEventListener('canplaythrough', function (e) {
    audio.removeEventListener('canplaythrough', arguments.callee);
    audio.play();
  }); 
}

試したこと

短い音源で試したり、（あまり変わりませんが）下記のプログラム試しましたがだめでした。

	const audio = new Audio('audio.mp3');
	audio.addEventListener('canplaythrough', () => {
		audio.play();
	});

###問題の発生した環境
Chrome最新版です

Answer 1

「再生タイミングをずらせばよい」という記事は出てきますが、ユーザーが能動的に（クリックとかで）再生する必要あるかもしれません。

【JS：Uncaught (in promise) DOMExceptionエラーとsetTimeout | 人生は読めないブログ】
https://torisky.com/js：uncaught-in-promise-domexceptionエラーとsettimeout/

【[jquery] Chromeでauto playを許可する方法 | BlueBear I/O】
http://blue-bear.jp/kb/jquery-chromeでauto-playを許可する方法/

Comments

[roko]

chromeのデフォルトではページに対するユーザーの干渉がない限り音楽が使えないんですね。クリックやキーを事前に押すことで無事再生されました。
ありがとうございます。