gapless looping audio html5

Question

anyone have any idea how to accomplish gapless looping for the audio tag? I'm thinking something javascript based..

I have a loop say 1 measure and I want it to loop and stay in tempo. So I need the loop to be smooth/gapless. When i simply set "loop" to true it will lag and does not stay in tempo.

Answer 1

While still not perfect, this worked for me:

var audio_file = new Audio('whatever.mp3') audio_file.addEventListener('timeupdate', function(){     var buffer = .44     if(this.currentTime > this.duration - buffer){         this.currentTime = 0         this.play()     } }); 

Experiment with the size of the buffer to find what works best for you

Answer 2

Solution is to have 2 instances to control the play back.

Something like this :

var current_player = "a"; var player_a = document.createElement("audio"); var player_b = document.createElement("audio");  player_a.src = "sounds/back_music.ogg"; player_b.src = player_a.src;  function loopIt(){     var player = null;      if(current_player == "a"){         player = player_b;         current_player = "b";     }     else{         player = player_a;         current_player = "a";     }      player.play();      setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds. }  loopIt(); 

And if you're using SoundManager2, source the audio through a Data URI instead of an URL request.

Strangely, I found that SoundManager2 request the file from the server each time it plays. Even it's loading from the cache, there will be a delay until the not-modified header is received for the audio file.