Question

这是我编写的用于在后台播放音乐的代码。如何在其中添加两秒钟的延迟？这将为图像完全加载提供时间

<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script type="text/javascript">
     var isChrome = /Chrome/.test(navigator.userAgent) && /Google 
Inc/.test(navigator.vendor);
        if(!isChrome){
  $('#iframeAudio').remove()
}
else{
 $('#playAudio').remove() //just to make sure that it will not have 2x audio 
in the background 
}
</script>
</head>
<body>
<iframe src="Happy Birthday Song.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe> 
<audio autoplay loop  id="playAudio">
  <source src="Happy Birthday Song.mp3">
</audio>
</body>
</html>

Answer 1

嗨，这是我建议您应该做的。首先，要删除音频标签上的自动播放属性。

然后，您可以使用javascript或jquery控制音频的播放时间。在您的情况下，您希望在加载所有资产时播放音频。.所以这里是一个示例。

//javascript
 window.onload = function() {
   document.getElementbyId("playAudio").play();
 }
 //jquery
 $(document).ready(function() {
   $("#my_audio").get(0).play();
 });

如果出于任何原因您仍然想要更多的延迟，可以说2秒..您可以进一步延长该时间...

var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
      setTimeout(function(){
       myAudio.play();
   }, 2000);
 }

 //jquery

 $(document).ready(function() {
     setTimeout(function(){
       $("#my_audio").get(0).play();
     }, 2000);    
 });

PS。使用两者中的任何一个。我记得您说过您对JS不熟悉。祝你好运好朋友

Answer 2

这是我想出的。以下脚本添加了3秒的时间

<script type="text/javascript">
     window.setTimeout(function () {
    var iframe = document.getElementById('my_audio');
    iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000); 
</script>

“ my_audio”是iframe ID。

<iframe style="display:none" id="my_audio">
</iframe>

欣赏自己的音乐

iframe.setAttribute('src', 'your music here');

在背景音乐中增加两秒钟的延迟

2 个答案: