Latency <audio> Html5 on mobile phones

Question

I am starting in javascript and I have in my hands a simple project but they are breaking my head.
The project consists of creating a multitrack player (such as recording studio software) where by clicking on play, the client can hear all the recorded instruments on the track in question.
Follow an example I’m talking about: Multitrack.com

Well, I have the following Markup:

    <audio id="player" src="audio/1.mp3" controls="controls" preload="auto"></audio><br />
    <audio id="player1" src="audio/2.mp3" controls="controls" preload="auto"></audio><br />
    <audio id="player2" src="audio/3.mp3" controls="controls" preload="auto"></audio><br />
    <button id="play">►</button>

And just below, the following javascript:

<script>
   var play = document.getElementById('play');
       play.addEventListener('click', function() {
            player.play();
            player1.play();
            player2.play();
       });
</script>

So far ok. When I open a browser via PC, the Audios load correctly simultaneously. However, when opening the project by android phone, the audios start late (latency) which makes them not synchronized.
What my mistake?
Is there any solution to this?
Or some way to make the audios sync...

Answer 1

You have two options.

Download the resources as blob, and add them to the DOM directly:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio/1.mp3', true);
xhr.responseType = 'blob';
var audio = document.querySelector('audio');
xhr.onload = function () {
    audio.src = URL.createObjectURL(xhr.response);  
};

Encode audio files as Data uris (making files on average 33% larger):

var audio = document.querySelector('audio');
audio.src = 'data:audio/mp3;base64,SUQzBAAAAAA...';
document.querySelector('button').onclick = function () {
    audio.play();
};

Source.