0

我正在尝试使用没有 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，即使它托管在其他地方。

非常感谢任何帮助

4

3 回答 3

2

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

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);
    });
}
于 2016-09-19T17:46:59.410 回答
1

我建议您使用音频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

希望这可以帮助

于 2016-09-19T17:48:21.907 回答
0

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

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()
   }
};
于 2020-03-03T06:01:14.913 回答