使用HTML5和JavaScript在后台按顺序或随机播放多种音频文件 [英] Play multiple audio files sequentially or randomly in background using HTML5 and javascript

问题描述

我想打3的音频文件（与更晚些的可能性），在后台运行。在这一点上，我只是想按顺序播放它们并将其循环回到第一个音频文件时，最后一个被播放。我相信我已经试过的功能几乎每一个解决方案或组合，我只是无法得到它的工作。我遇到的两个问题之一：

I am trying to play 3 audio files (with the possibility of more later) that run in the background. At this point I am simply trying to play them sequentially and have it loop back to the first audio file when the last is played. I believe I have tried almost every solution or combination of functions and I just can't get it to work. I run into one of two problems:

1. 如果我尝试使用重复存储阵列中的每个音频，网页会成功扮演的第一个，然后尝试同时播放接下来的两个，而不是按顺序。它肯定不会再回到第一个。此外，如果你在我的html注意到，我对每个玩家一个单独的ID。它会更好把他们都在样本玩家ID？

1. If I try using repetition with each audio stored in the array, the page will successfully play the first then tries to play the next two simultaneously, rather than sequentially. And it certainly does not go back to the first. Furthermore, if you notice in my html, I have a seperate ID for each player. Would it be better to put them all in the sample player 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();
    });

}
});

在另一方面，我可以发挥每一个顺序，但各自发挥需要为硬codeD，我不能循环回第一个

On the other hand, I can play each sequentially but each play needs to be hardcoded for and I cannot loop back to the first

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另一个事件触发功能？有些帮助是极大的AP preciated。

I am not terribly familiar with javascript, I am wondering if there is another event trigger function built into JS that I am not using? Some help is greatly appreciated.

推荐答案

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在后台按顺序或随机播放多种音频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！