Playing multiple html5 audio files (mp3) in sync safari

Question

I am using the oncanplaythrough event to check when all 6 audio files are ready to play. This works fine everywhere, apart from safari where some tracks start one or two seconds after the others. I tried using a setTimeout as an extra buffer - but this has no effect.

The all appear to be ready to play, but for some reason firing play does not start all tracks at the same time.

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/>