javascriptのaudioの1回目がならずにエラーを吐きます

Question

バニラで書く練習をしています。

4択クイズの問題文をwavで出力したいのですが、ページを開いて1問目だけエラーを吐いて音声が出ません。2問目以降はしっかりと問題文が読まれます。

defer属性を付けています。一部抜粋

    const ImgNum = [...Array(45).keys()];
    const QuizArray = random(ImgNum,4);

    console.log(QuizArray);
    document.getElementById("answer").textContent = random(QuizArray,1) ;
    const qSound = new Audio;
    qSound.src = 'sound/quiz/' + document.getElementById("answer").textContent + '.wav';
    qSound.play();
//最終行が14行目です

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

何が原因でどう回避すればよいでしょうか。

Answer 1

音声ファイルや、ミュートでない動画ファイルはページを開いたあと自動では再生できません。
クリックなど、何かしらの閲覧ユーザーのアクションが必要です。

because the user didn't interact with the document first

エラーメッセージのこの部分です。

ちなみに同じような質問が過去にもあったようです。
このような場合、ブラウザのエラーメッセージ（の一部とか）で検索すると出てきたりします。
https://teratail.com/questions/211850

Comments

[Izumo1101]

ご回答ありがとうございます。やはりそうでしたか。
1問目だけはユーザーにスタートさせてもらおうと思います。

[mattari_panda]

あとコードには記載されていないかもですが、どこかで音声ファイルの読み込みを待つ処理を入れたほうが良さそうです。
例えばですが、最初に使用する音声ファイルを全部読み込んでおいたりすると、その後スムーズにコントロールできるようになります。
バニラで書く練習頑張ってください。