在同步safari中播放多个html5音频文件(mp3)

时间:2018-05-21 09:57:59

标签: javascript audio html5-audio

我正在使用oncanplaythrough事件检查所有6个音频文件何时可以播放。这种方法在任何地方都可以正常工作,除了一些轨道在其他轨道开始一两秒后开始。我尝试使用setTimeout作为额外的缓冲区 - 但这没有任何效果。

所有人似乎都准备好了,但由于某种原因,射击游戏不能同时启动所有曲目。



var tracksUrls = [
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/01-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/02-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/03-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/04-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/05-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/06-lazy-days-01-128kpbs-4min-4db.mp3"
];

loadedCount = 0
tracks = []

function buildTracks() {
  
   for (var i = 0; i < tracksUrls.length; i++) {
     
    var aud = new Audio();
    tracks.push(aud); 
    aud.preload = "auto"; 
    aud.controls = true;
    aud.load();
    aud.oncanplaythrough = function(e) {
      loadedCount++;
      if (loadedCount === tracksUrls.length) 
        allLoaded();
    };
    
    aud.src = tracksUrls[i];
    document.body.appendChild(aud);
   
    
  }
}

function allLoaded() {
  // extra delay for safari?
  setTimeout(playAll, 1000);
  
}

function playAll() {
  tracks.forEach(Function.call.bind(tracks[0].play));
}

// play button
var start = document.getElementById("play");
start.addEventListener("click", function(e) {
  e.preventDefault();
buildTracks();
});
&#13;
<a id="play" href="">PlAY TRACKS </a> <br/><br/>
&#13;
&#13;
&#13;

0 个答案:

没有答案