使用JavaScript

Question

我尝试使用没有HTML5音频标签的Javascript一个接一个地播放三个MP3文件。 [我在Articulate Storyline中工作，这是一个电子学习的创作工具。它支持文件中的Javascript而不支持HTML]

到目前为止，我所获得的最好的是以下内容同时播放：

function myFunction() {
    var audio1 = new Audio('http://www.mysite.co.uk/h/welcome.mp3');
    var audio2 = new Audio('http://www.mysite.co.uk/h/name.mp3');
    var audio3 = new Audio('http://www.mysite.co.uk/h/cont.mp3');

    audio1.play();
    audio2.play();
    audio3.play();
}

我已经考虑过了等待＆＃39;函数，但我只知道如何使用JQuery正确地做到这一点，如果我正确地回忆起来，即使它被托管在其他地方，Articulate Storyline也不支持JQuery。

非常感谢任何帮助

Answer 1

您可以使用侦听音频播放的事件处理程序结束，然后播放下一个等等。

function play(audio) {
    audio.play();
    return new Promise(function(resolve, reject) {
        audio.addEventListener('ended', resolve);
    });
}

function myFunction() {
    var audio1 = new Audio('http://www.mysite.co.uk/h/welcome.mp3');
    var audio2 = new Audio('http://www.mysite.co.uk/h/name.mp3');
    var audio3 = new Audio('http://www.mysite.co.uk/h/cont.mp3');

    play(audio1).then(function() {
        return play(audio2);
    }).then(function() {
        return play(audio3);
    });
}

Answer 2

我建议你使用音频 onended 事件。只听一个玩家停下来玩下一个。

示例： 一种方法是将玩家添加到阵列中以便更好地控制

var players = [audio1,audio2,audio3];

    var counter = 0;

    audio1.onended = playNext;



    function playNext(){
         if(counter <= players.length){
          counter++
          players[counter].play();
          players[counter].onended = playNext;
    }
   }

oneneded：http://www.w3schools.com/tags/av_event_ended.asp

希望这有帮助

Answer 3

您可以使用此简单方法播放无限个文件：

PlayAll= function (pathList) {

    if(pathList.length>0){
      var audio = new Audio(pathList[0]);
      if(pathList.length>1){
         var count = 1;
         $(audio).on('ended', function () {
            if (count < pathList.length) {
               audio.src =  pathList[count];
               audio.play();
               count++;
            }
         });
      }
      audio.play()
   }
};