2

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 :)

netvope
  • 7,647
  • 7
  • 32
  • 42

4 Answers4

3

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.

Dominic K
  • 6,975
  • 11
  • 53
  • 62
1

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.

Goyuix
  • 23,614
  • 14
  • 84
  • 128
1

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).

www0z0k
  • 4,444
  • 3
  • 27
  • 32
1

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.

Maurycy
  • 1,324
  • 1
  • 11
  • 33
  • 1
    The link provides comprehensive information on gaps in mp3 files. A must-read for the curious! – netvope Nov 05 '10 at 06:26