我如何延迟JQuery的自动播放音频 /HTML5

Question

我的页面上有一个自动播放音频，当我打开网页时，音频直接播放时，它的html5音频，我希望音频延迟三秒钟，然后播放。

>

这是代码

<div class="audio">
            
                <audio autoplay> <source src="loading/harely.mp3" type="audio/mp3">  </audio>
            
            </div>

我尝试了这种方式，但是音频并没有延迟

    $('.audio').delay(3000).append('<audio autoplay> <source src="loading/harely.mp3" type="audio/mp3">  </audio>');

<div class="audio">
</div>

谢谢

Answer 1

使用简单的延迟功能

setTimeout(function(){ 
    // code here
}, 3000);

Answer 2

我相信不要弄乱html元素，而是使用函数javascript更好。

let playNow = function() {
 let audio = new Audio('YourMusic.mp3');
audio.play();
}
setTimeout(function(){ 
    playNow();
}, 5000);

请参阅demo

Answer 3

，而不是为尝试维护页面维护的任何人而艰难，为什么不简单地将音频元素放入HTML（没有自动播放属性集），然后使用JavaScript开始它来启动它玩？

类似以下内容将做到这一点。（由于SRC无效，因此在页面中不起作用）

function byId(id){return document.getElementById(id)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
  setTimeout( function(){ byId('myAudioElem').play() }, 3000 );
}

<audio id='myAudioElem' src='yourAudioFilenameHere.extension'></audio>

这比迄今为止其他建议具有许多优点：

1. HTML中有一个明确定义的元素 - this：

   • 使维护更容易
   • 允许对象的用户从dom
   中查找并将其删除

2. 在加载页面时，浏览器开始下载并立即解码音频。这有助于确保它实际上确实在3秒后开始播放，而不是在此之后的某个时候发生 - 这取决于连接速度和查看设备的CPU速度。

，如果您使用以下 setTimeout使用函数，则可以轻松地听到差异从另一台服务器加载元素时，甚至更大（更长）的回声。

 setTimeout( 
                function()
                { 
                    var audio = document.createElement('audio'); 
                    audio.src = 'yourAudioFilenameHere.extension';
                    audio.play();
                    byId('myAudioElem').play() 
                }, 
                3000 
            );