我正在使用HTML5中的<audio>
标签播放MP3音频文件。
<audio controls="controls" autoplay="autoplay">
<source src="song.mp3" type="audio/mp3" />
</audio>
这段代码可以正常工作,但我想知道如何在歌曲自动播放之前加入延迟?我知道没有delay
属性,但我在想是否可以通过JavaScript实现?
我正在使用HTML5中的<audio>
标签播放MP3音频文件。
<audio controls="controls" autoplay="autoplay">
<source src="song.mp3" type="audio/mp3" />
</audio>
这段代码可以正常工作,但我想知道如何在歌曲自动播放之前加入延迟?我知道没有delay
属性,但我在想是否可以通过JavaScript实现?
试试这个,非常简单,但你应该把JS移出标记...
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 8000)">
<source src="Kalimba.mp3" type="audio/mp3" />
</audio>
Javascript only 方法:
var sound = document.createElement('audio')
sound.id = 'audio'
sound.controls = 'controls'
sound.src = 'http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3'
sound.type = 'audio/mp3'
document.body.appendChild(sound)
function playAudio() {
document.getElementById('audio').play();
}
setTimeout("playAudio()", 3000);
<div id='audio'>This will be replaced with an audio tag</div>
jQuery:
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
全部在一起将是:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div id='audio'>This will be replaced with an audio tag</div>
<script type='text/javascript'>
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
</script>
</body>
</html>
.delay()
在jQuery中延迟一个进程。时间以毫秒为单位,所以2000 = 2秒。