Воспроизведение нескольких аудио файлов html5 (mp3) в синхронизированном сафари - PullRequest
Новая
       8

Воспроизведение нескольких аудио файлов html5 (mp3) в синхронизированном сафари

0 голосов
/ 21 мая 2018

Я использую событие 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();
});
<a id="play" href="">PlAY TRACKS </a> <br/><br/>
...