我正在尝试播放在后台运行的 3 个音频文件(以后可能还会有更多)。此时,我只是尝试按顺序播放它们,并在播放最后一个音频文件时让它循环回到第一个音频文件。我相信我已经尝试了几乎所有解决方案或功能组合,但我就是无法让它工作。我遇到两个问题之一:
如果我尝试对数组中存储的每个音频使用重复,页面将成功播放第一个音频,然后尝试同时播放接下来的两个音频,而不是按顺序播放。而且它肯定不会回到最初的状态。此外,如果您在我的 html 中注意到,我为每个玩家都有一个单独的 ID。将它们全部放入示例玩家 ID 中会更好吗?
jQuery(document).ready(function (){ var audioArray = document.getElementsByClassName('playsong'); var i = 0; var nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); while(true){ $('#player').on('ended', function(){ if(i>=2){ i=0; } else{ i++; } nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); }); } });
另一方面,我可以按顺序播放每个播放,但每个播放都需要进行硬编码,并且我无法循环回到第一个播放
jQuery(document).ready(function (){ var audioArray = document.getElementsByClassName('playsong'); var i = 0; var nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); $('#player').on('ended', function(){ // done playing //alert("Player stopped"); nowPlaying = audioArray[1]; nowPlaying.load(); nowPlaying.play(); $('#player2').on('ended', function(){ nowPlaying = audioArray[2]; nowPlaying.load(); nowPlaying.play(); }); }); });
这是我的 html
<audio id="player" class = "playsong">
<source src="1.mp3" />
</audio>
<audio id="player2" class = "playsong">
<source src="2.mp3" />
</audio>
<audio id="player3" class = "playsong">
<source src="3.mp3" />
</audio>
我对javascript不太熟悉,我想知道JS中是否还有另一个我没有使用的内置事件触发函数?非常感谢一些帮助。
最佳答案
HTML
<audio id="song-1" preload class="songs">
<source src="1.mp3" type="audio/mpeg" />
</audio>
<audio id="song-2" preload class="songs">
<source src="2.mp3" type="audio/mpeg" />
</audio>
<audio id="song-3" preload class="songs">
<source src="3.mp3" type="audio/mpeg" />
</audio>
<audio id="song-4" preload class="songs">
<source src="4.mp3" type="audio/mpeg" />
</audio>
JS
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('songs');
var i = 0;
audioArray[i].play();
for (i = 0; i < audioArray.length - 1; ++i) {
audioArray[i].addEventListener('ended', function(e){
var currentSong = e.target;
var next = $(currentSong).nextAll('audio');
if (next.length) $(next[0]).trigger('play');
});
}
});
关于javascript - 使用 HTML5 和 javascript 在后台顺序或随机播放多个音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22025051/