how to play <audio> blocks one by one with no pops and clicks?

Question

I have two tags like this:

<audio id="1" src="lub0.mp4" />
<audio id="2" src="lub1.mp4" />

I want to play them one by one, i.e. .play() first one and when it launches onend event, I'll .play() the second one. Unfortunately this gives me a pop sound in between. Is there any correct crossbrowser way to do this without click?

The files themselves are fine, if I glue them to each other in ffmpeg, sound is perfect.

Thanx.

Answer 1

Try the following.

var fileOne = document.getElementById('1');
fileOne.onended = function() {
    document.getElementById('2').play();
}

fileOne.play();

I did format the audio tag differently, I tried it the way you had it and it failed. Here is how I have it

<audio id="1">
<source src="movie.mp4" type="video/mp4">
</audio >

<audio id="2">
  <source src="movie.mp4" type="video/mp4">
</audio >