音頻文件 (.mp3) 不會在頁面重新加載時播放，僅在 VS 代碼/Live Server 擴展在保存時自動重新加載時播放一次

Question

在 Chrome/Firefox/Edge 上測試。 我正在使用 VS 代碼和“Live Server”擴展來開發 Win10。

頁面加載，第一個音頻文件（.mp3）播放，然后不同的元素出現 Jquery 延遲等。在某個 <ul> 淡入時，第二個音頻文件播放。

使用“Live Server”的自動重新加載保存功能或單擊導航欄指向同一頁面的鏈接（測試目的），聲音和 Jquery 功能工作正常，但如果我用瀏覽器本身刷新，聲音文件不會不玩了。

我嘗試了在谷歌上找到的解決方案，比如設置 currentTime、onLoad，但他們並沒有真正回答類似的問題，我取得的最大成功是從一開始就取得了相同的結果。

我剛開始學習JS和Jquery，所以如果代碼混亂，我很抱歉。

  <script type="text/javascript" src="script/jquery-3.5.1.min.js"></script>

  <script type="text/javascript" src="script/main.js"></script>

  <script>
      var audio1 = $("#mantra")[0];
      var audio2 = $("#wind")[0];
      audio1.play()
        

    $("document").ready(function () {
      $(".choix").hide()   // .choix is the class of fig1, fig2, fig3, fig4
      $("#fig1").delay(9500).fadeIn(3000);
      $("#fig2").delay(9550).fadeIn(3000);
      $("#fig3").delay(9600).fadeIn(3000);
      $("#fig4").delay(9650).fadeIn(3000);
      
      $("#tagline").hide().delay(2000).fadeIn(1500)
          .delay(1500).fadeOut(2000).queue(function(n) {
          $(this).html("<br> Start here");
          n();
        }).delay(700).fadeIn(2000);
      
      $(".textNav").hide().delay(800).fadeIn(1500);

      });
      $("#wind").stop("true").delay(9400).queue(function() {  //9400ms delay to start just before fig1+
        audio2.play()
      });

      
    });
  </script>

Answer 1

如果沒有播放音頻，請檢查控制台，您會發現錯誤提示

DOMException: play() 失敗，因為用戶沒有先與文檔交互。

這是因為瀏覽器不允許在頁面加載時自動播放音樂。 在播放音頻之前，用戶必須與 window 進行一些交互（單擊、點擊等）。

資源