html5 audio latency on mobile devices

Question

html5 audio latency on mobile devices

Navigation

#1 by (1 votes)

4

I'm starting in javascript and I have a simple project in hand but they're breaking my head. The project consists of creating a multitrack player (such as those recording studio software) where when clicking on play, the client can hear all the instruments recorded in the track in question. Here's 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, okay. When I open a browser through the PC, audios load correctly, simultaneously. However, when opening the project by the Android phone, the audios start with delay (latency) which causes them not to be synchronized. What's my mistake?
Is there any solution for this?
Or some way to make the audios synchronized ...

javascript html5

asked by anonymous 17.04.2015 / 21:31

1 answer

Search in populated DataGridView by typing on it Apply Material Design (android: Theme.Material) for Android versions smaller than API 21?

score 1 · Answer 1

You have two options.

Download features like 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 like Data URIs (making the files an average of 33% larger):

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

Source.