如何在后台播放音频但延迟？答案

【问题标题】：How can I play audio in the background but delayed?如何在后台播放音频但延迟？
【发布时间】：2019-06-02 23:24:14
【问题描述】：

我想让音频在后台播放，但我不想让它在页面加载。我可以用 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>

希望您能提供帮助！

【问题讨论】：

是的，使用 javascript - 这可能会有所帮助：developer.mozilla.org/en-US/docs/Web/API/…
使用 setTimeout 函数。这会有所帮助

标签： javascript html css html5-audio

【解决方案1】：

是的，这是可能的。你可以像这样使用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>

【讨论】：

我不想让音频可见？我可以用隐藏来做到这一点吗？
@Liesanne 你可以使用visibility:hidden 风格的音频。是的，它与浏览器兼容（移动浏览器除外...因为无法在移动浏览器中实现自动播放。这是不允许的）
好吧，它只是不会自动播放..我将帖子编辑到我最近的代码
我已将延迟时间设置为 3 秒。你可以随心所欲地改变它......
谢谢，我明白了！它只是行不通..没有音频出来..它应该进入头部吗？我确实使用了 m.4a 文件，但这应该没关系吧？

【解决方案2】：

是的。您可以使用一些 JS 轻松实现相同的目标。

在页面中的某处放置音频 div 标签。 ex- div id="audio"
在您希望单击按钮时执行代码或使用 setTimeout 在 30 秒或 2 分钟后自动执行代码。设置超时（（）=> { document.getElementById('song').innerHTML = 'audio id="audio-player" controls="controls" style="display: none" src="media/Blue Browne.mp3" type="audio/mpeg"' ; }, (毫秒));

注意添加我在示例中删除的标记标签，因为这里不支持。

【讨论】：