JavaScriptでtry-catch文を使っているのにエラーが発生する

Question

HTML&CSS, JavaScript(jQuery使用)でWEBアプリの個人開発をしている者です

ChromeでJavaScriptから音楽を再生する場合、ユーザーからの許可があるとブラウザが判断した場合でないと再生ができないらしいので、「try-catch」文を使い、再生しようとしてブラウザに許可されなかった場合はボタンを表示し、そのボタンをクリックした場合に再生するような動作を意図してコードを書きました。

しかし、try文内に該当のコード（music.play();）があるにも関わらず、chromeではそこでエラー▼

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

が発生して動作が止まってしまいます。

どうしてでしょうか？
また、解決法がおわかりでしたら教えていただけると助かります????

Chromeで音楽を自動再生するために試したこと

• iframeを使えば再生できるという情報(teratailの他の質問)があったので試してみましたが、うまくいきませんでした
• mute状態、または音量を0にしておけば自動再生できるという情報がありましたが、できませんでした
• new Audio()ではダメだったので、HTMLにaudioタグを書き、それを使ってやる方法に変えていますが、やはりエラーが出ました(audioタグにautoplay属性をつけているわけでもありません)
• ユーザーに明示的に許可を求めて以降そのユーザーがWEBアプリを開いた時に自動再生ができるようにしようとしたのですが、そのような方法は見つかりませんでした

→
そこで、自動再生は諦め、ボタンをユーザーが押すと音楽が再生される仕組みにしました（うまくいきました）。しかし、作っているWEBアプリの性質上なるべくBGMの自動再生をしたほうがいいと判断し、自動再生が可能なブラウザの場合は自動再生をするために、try-catch文を使うことを考えました。
しかし、try文の中であるにも関わらず上記のエラーがでて処理が止まりました

let music;
(中略)
//jQuery使用
$(function(){
music=$("#bgmmusic")[0];
(中略)
//***********
try{
    music.play();//chromeでエラー発生:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
  }
  catch{
    $("#mute").before("<button type=\"button\" name=\"button\" id=\"play\" onClick=\"play()\"></button>");
  }
//************
(中略)

})

Answer 1

play メソッドの戻り値は Promsie 型なので、 try-catch ではエラーハンドリングできません。
Promise 型のエラーハンドルには catch メソッドを使います。

music.play().catch(error => console.log(error));

Comments

[qyoeku]

ありがとうございます！