How can I do gapless audio looping with mobile browser?

Question

It seems I'm unable to achieve gapless looping with mobile. This is what I've done so far:

https://github.com/Hivenfour/SeamlessLoop

• Creates a gap.

http://www.schillmania.com/projects/soundmanager2/demo/api/

• Creates a gap.

https://github.com/regosen/Gapless-5

• Creates a gap.
• Downloads same audio twice.

https://github.com/floatinghotpot/cordova-plugin-nativeaudio

• Creates a gap.

HTML5 audio

• Creates a gap.

Cordova's media plugin

• Creates a gap.

WebAudio

• WORKS!
• For 1.5min audio clip, decoding time is > 30 seconds.
• https://code.google.com/p/chromium/issues/detail?id=424174

All above tested with mp3 and ogg.

EDIT:

SoundJS's cordova plugin is broken and thus doesn't work;

https://github.com/CreateJS/SoundJS/issues/170

Answer 1

With HTML5 If you are using HTML5, then use loop attribute.

<audio controls loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

It doesn't create gap, check with your audio file, most of the audio file has gap at the end.

You can test it here, just add loop attribute and run the page.

With JavaScript

Here is also an alternative by using javascript

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

Here JavaScript will create little gap, you can overcome it by playing loop not when audio is finished but when audio is about to finish. Here is code.

Here is what you want.

myAudio = new Audio('http://unska.com/audio/pinknoise.ogg'); 
myAudio.ontimeupdate= function(i) {
  if((this.currentTime / this.duration)>0.9){
    this.currentTime = 0;
    this.play();
  }
};
myAudio.play();

Here is Demo.