使用 JavaScript 在没有 HTML5 音频的情况下按顺序播放 MP3 文件

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

我考虑过“等待”功能，但我只知道如何使用 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 event 。 只听一位玩家停止然后播放下一位。

示例：一种方法是将您的玩家添加到数组中以更好地控制

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

已完成： 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()
   }
};