如何在后台播放音頻但延遲？

Question

我想讓音頻在后台播放，但我不希望它在頁面加載時啟動。 我可以用 CSS 或 JS 延遲它嗎？ 這可能嗎？

我現在得到了這個，但它仍然不起作用。 我認為它應該起作用。 谷歌瀏覽器也不應該重要吧？

<audio id="audioID"
  src="spraakbericht.m4a"
style="display:none/*or you can use visibility:hidden*/"></audio>

<script>
  var myAudio = document.getElementById("audioID");
  window.onload = function() {
    setTimeout(function(){
    myAudio.play();
    }, 3000); // you can change this... whatever you want //
  }
</script>

希望你能幫上忙！

Answer 1

是的。 您可以使用一些 JS 輕松實現相同的目標。

• 將音頻 div 標簽放在頁面中的某個位置。 ex- div id="音頻"
• 當您想要單擊按鈕或在 30 秒或 2 分鍾后使用 setTimeout 自動執行代碼。 setTimeout(() => { document.getElementById('song').innerHTML = 'audio id="audio-player" controls="controls" style="display: none" src="media/Blue Browne.mp3" type ="音頻/mpeg"'; }, (毫秒));

請注意添加我在示例中刪除的標記標簽，因為它不支持這里。

Answer 2

是的，這是可能的。 您可以像這樣使用setTimeout function ：

<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 3000)">
  <source src="music.mp3" type="audio/mp3" />
</audio>

對於背景音頻：

var myAudio = document.getElementById("audioID");
window.onload = function() {
  setTimeout(function(){
   myAudio.play();
  }, 3000);
}

編輯這是您的工作示例：

 <audio id="audioID" src="http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3" style="display:none/*or you can use visibility:hidden*/"></audio> <script> var myAudio = document.getElementById("audioID"); window.onload = function() { setTimeout(function(){ myAudio.play(); }, 3000); // you can change this... whatever you want // } </script>