我正在尝试使用一些jQuery编写一些JavaScript代码，以通过设置随机的声音延迟时间来播放随机声音文件(从数组中选择)以定期播放。到目前为止，我已经使用了随机歌曲选择器。但是，playMusic函数的递归似乎存在问题。仅两首歌曲将连续播放，然后在歌曲之间没有延迟地停止播放。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var randInterval = 0;
var songList = ["song1","song2","song3","song4","song5"];
var songHTML;
function getRandomSong(){
var randSong = songList[Math.floor(Math.random()*songList.length)];
songHTML = "<source src='music/" + randSong + ".mp3'>" +
"<source src='music/" + randSong + ".ogg'>";
return songHTML;
}
function setRandomInterval(){
randInterval = Math.floor((Math.random()*60)+60);
return randInterval;
}
function playMusic(){
var delayTime = setRandomInterval();
$(document).ready(function(){
$('#myAudio').html(getRandomSong());
$('#myAudio').prop("volume", 0.05);
$('#myAudio').get(0).play();
});
$('#myAudio').on('ended', function(){
$('#myAudio').delay(delayTime).queue(function(){
return playMusic();
});
});
}
</script>
</head>
<body onload="playMusic()">
<div>
<audio controls id="myAudio" autoplay>
</audio>
</div>
</body>
</html>
最佳答案
我想出了怎么做。下面是正确工作的代码。我删除了所有与JQuery相关的代码。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randInterval = 0;
var songList = ["song1","song2","song3","song4","song5"];
var myAudio = new Audio("music/" + songList[Math.floor(Math.random()*songList.length)] + ".mp3");
//Generates a random song, sets it attributes/properties, and
//appends a file extension that works with the browser.
function getRandomSong(){
var randSong = songList[Math.floor(Math.random()*songList.length)]
if (myAudio.canPlayType('audio/mp3;')) {
myAudio.src="music/" + randSong + ".mp3";
} else {
myAudio.src="music/" + randSong + ".ogg";
}
myAudio.id="myAudio";
myAudio.volume=0.15;
myAudio.load();
myAudio.controls=false
myAudio.preload=false;
}
//Sets a random interval for the setTimeout Function with the
//'variation' parameter being a random amount of time in
//seconds, and the 'range' parameter being a set amount of time
//in seconds.
function getRandomInterval(variation, range){
randInterval = Math.floor((Math.random()*1000*variation)+(1000*range));
return randInterval;
}
//Gets a random song and plays that song.
function playMusic(){
getRandomSong();
myAudio.play();
}
</script>
</head>
<body>
<script type="text/javascript">
//Plays music on page load.
playMusic();
//Event Listener that will start a new song after a pause
//of randomly determined length.
myAudio.addEventListener('ended', function(){setTimeout(function(){playMusic();}, getRandomInterval(2,2));}, false);
</script>
</body>
</html>
关于javascript - 延迟后自动播放随机HTML音频的Javascript函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22391933/