2016-12-05 140 views
1

我有一个自动播放音频在我的网页,它的html5音频,当我打开网页的音频直接播放,我希望音频延迟三秒,然后播放..我怎么能延迟一个自动播放音频/ html5由jquery

这是代码

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

我想这样的jQuery,但音频迟迟没

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

 

 
</div>

谢谢

回答

1

使用简单的延时功能

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

谢谢你的作品..这是我做的 setTimeout(function(){ $('。audio')。append(' '); },3000); 我想知道我可以在纯js函数中使用jquery方法 – saifaldeen

+0

jQuery是一组JavaScript库。所以所有的jQuery函数都可以在纯JS函数中工作。 – Jaber

+0

谢谢..以及为什么jQuery延迟功能不起作用? – saifaldeen

1

我相信这是很多最好不要乱用HTML元素,并使用JavaScript的功能来代替。

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

setTimeout(function(){ 
    playNow(); 
}, 5000); 

Demo

+0

这是让人们认为我会关闭你的网页并且不再重新访问它的最佳方式之一。任何创建不在DOM中并且使其自动播放的音频元素的页面都将被视为比整页广告更差。 – enhzflep

+0

@enhzflep是的!我想是的......但这只是一个解决方案,而不是UX的建议。 – M98

+0

没有明确阻止提供提供两者的解决方案。 – enhzflep

1

而不是使生活困难的人试图尝试维护网页,为什么不干脆把音频元素插入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中明确定义的一个元素 - 这个:

    • 使maintenan CE容易
    • 允许对象用户找到并从DOM
  2. 浏览器开始在页面加载时间立即下载和解码音频中删除。这有助于确保它实际上在3秒后开始播放,而不是在此之后的某个时间发生 - 这一时间取决于观看设备的连接速度和CPU速度。

你可以很容易听出区别,如果你不是使用功能setTimeout像下面,确保指定为在DOM做了同样的声音文件 - 播放时,你会得到一个明显的回声从本地主机和一个更大(更长)的回声加载从另一台服务器的元素时。

setTimeout( 
       function() 
       { 
        var audio = document.createElement('audio'); 
        audio.src = 'yourAudioFilenameHere.extension'; 
        audio.play(); 

        byId('myAudioElem').play() 
       }, 
       3000 
      );