CODEWITHSUNDEEP
silverlightflashmp3ffmpegguitar
netvope
netvope

Reputation: 7967

How to loop an mp3 in a browser with zero gap?

I'm trying to make a guitar practice website, and a critical functionality is to loop over very short mp3 files (a few seconds long), with absolutely zero gap in between. For example, it could a 4-measures-long chord progression, and I want to allow the user to loop over it seamlessly.

I tried using the HTML5 <audio> tag with the loop attribute. Google Chrome gives a small gap between the loops, but big enough to be totally unacceptable for my purpose. I haven't tested the other browsers, but I believe it won't work.

A possible workaround is to use ffmpeg to stream repetitions the same audio as an mp3. However, this costs a lot of bandwidth.

For myself I use Audacity to loop without gaps, but unfortunately Audacity doesn't have a web version.

So, do you have any ideas how I may loop over an mp3 in a browser with zero gap? I prefer non-Flash solutions, but if nothing else works I'll use Flash.

Edit: Thank you for all your suggestions. Flash turns out to work decently. I've made a toy demo at http://vmlucid.lcm.hk/~netvope/audio/flash.html. To my surprise (I use to associate Flash with resource hog and browser crashes only), Flash and ActionScript are rather well designed and easy to use. It took me only 3 hours on my first Flash project :)

Upvotes: 2

Views: 3275

Answers (4)

Maurycy
Maurycy

Reputation: 1322

Or check out this utility: http://www.compuphase.com/mp3/mp3loops.htm I used it successfully for my flash projects when music had to be looped without gaps, and 99% of the time it worked. It takes WAV as an input.
Basically it is a kind of front-end for LAME mp3 encoder, which uses such settings as to prevent the gaps appearing. It won't work on very short sound effects (less than 0.5 second I believe).
Afterward all you have to do is use:

var sound:Sound = new MySoundEffect();
sound.play(0, 1000);

and it will loop one thousand times.

Upvotes: 1

www0z0k
www0z0k

Reputation: 4434

in flash AS3 you can extract sound data with computeSpectrum() and give it to your Sound object exactly when it's needed (SampleDataEvent is fired).

Upvotes: 1

Goyuix
Goyuix

Reputation: 24370

I am not sure how well this will work, but if you knew your loop lasted 800 milliseconds - you could have the browser call the play method every 800ms... it still wouldn't be guaranteed to be perfect though. I don't think the browser is natively capable of delivering reliable audio looping at this point.

setInterval(function(){
  document.getElementById("loop").play();
}, 800);

Rumor has it the best way to do pull this off in the most gapless fashion to use to multiple audio tags and alternate between them.

Upvotes: 1

Dominic K
Dominic K

Reputation: 7085

Have a look at this page. Listening for a while using Google Chrome 7, I found Method 1 works decently, while Method 3 gives the best results, though it's a bit of a hack. Ultimately, all browsers work differently, especially since HTML5 isn't finalized yet. If possible, you should opt for a Flash version, which I would think would give you the best loop.

Upvotes: 3

Related Questions