Question

我正在尝试播放在后台运行的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中的事件触发器函数，我没有使用它？非常感谢一些帮助。

Answer 1

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');
    });
}
});

使用HTML5和javascript在后台顺序或随机播放多个音频文件

1 个答案: