按顺序播放无 HTML5 音频且 JavaScript 的 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();
}

我考虑过 'wait' 功能，但我只知道如何使用 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;
    }
   }

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

按顺序播放无 HTML5 音频且 JavaScript 的 MP3 文件

Play MP3 files in order without HTML5 audio with JavaScript

javascript

audio

jquery

mp3

articulate-storyline