播放MP3文件顺序没有HTML5音频与JavaScript

Play MP3 files in order without HTML5 audio with JavaScript

本文关键字：HTML5 音频 JavaScript MP3 文件 顺序 播放      更新时间：2023-09-26

我试图播放三个MP3文件一个接一个使用Javascript没有HTML5音频标签。[我使用的是"清晰的故事线"，这是一个用于电子学习的创作工具。它在文件中支持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正确地做到这一点，如果我回忆正确的话，清晰的故事线不支持JQuery，即使它托管在其他地方。

任何帮助都是非常感谢的

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

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

我建议您使用audio 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;
    }
   }

onenneeded: http://www.w3schools.com/tags/av_event_ended.asp

希望能有所帮助

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

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()
   }
};
相关文章：