Looping Audio without gap?


(Peter Juul Kristensen) #1

I am trying to loop audio with no gap.

I have little to none programming experience and was trying to rely on the built in loop audio function in Hype, but this leaves a gap, as you can hear on this preliminary version
(Try the PINK NOISE BOTH - but turn down your speakers!

Is there a way (with as little programming as possible) to loop the audio without the built in loop audio tick-box?

Any help is greatly appreciated.

A universal 'mute' button possible?
Saving Maggie; An interActive Graphic Novel

It’s gonna be difficult because of buffering issues within the browsers (not Hype) which always culminates in a gap when trying to seamlessly loop audio.


Hi Peter!

I’ve been skimming the Internet just now because of your question and it appears HTML5 has a problem with the audio tag in terms of seamless looping - it was not designed to do it - which is close to unbelievable.

The following looks like an interesting starting point - haven’t tried it.

Gapless 5: A gapless JavaScript/CSS audio player for HTML5

Here is a page with examples using Gapless 5 (there’s more to it than just looping). The top one (“Drum Loop”) is the seamless looping demo. Sounds great!

(Peter Juul Kristensen) #4

I’ve now updated the page to v3:


with minor minor improvements - looping-wise. I’ved tried to use the timeline, but as you mentioned it’s a browser issue. (Still not all buttons are functioning BTW). Unfortunately I think the gapless audio is a little over my league, programming wise, even though it seems like it’s the way to go.

Are you still not able to even load my page? Try the Pinknoise button just below stop.


It’s essentially using the Web Audio API and HTML5 Audio together to create a good solution for gapless playback.

Here is info on the former. It’s very daunting but don’t let that scare you.

You can use a bare bones structure to play your audio and loop it.

(Trey Yancy) #6

There are low level workarounds, such as playing multiple audio tracks simultaneously.

If it were me, I would take a copy of the audio file, grab the last three seconds, cut and copy it to the front, then delete all but the first six seconds. Create a fade so that it stars and ends in silence and peaks at three seconds (use a “bell curve” envelope so that it smoothly fades in and out. Now grab that six second section and move it to the right in your audio editor so that you end up with a track that is precisely the same length as the original track. When you bring this patch track into Hype, set it to start three seconds after the original and to loop as well. This will cover the gap and stay in sync.

Note 1 - The above is based on the idea that the audio track is designed to loop seamlessly. if the start and end sections different (such as being at different volume levels, different content, or the rhythm is off) you would need to smooth this out or it will be noticeable.

Note 2 - You may have to play with the volume levels at the loop point so that the patch doesn’t create a swell in volume.


You will still have the same buffering problem in a browser unless you endlessly copy the audio throughout your project or just create one long audio file. Nice try Trey.

(Trey Yancy) #8

This will work just fine, because the gap is offset. The patch starts three seconds later than the main track. The tracks are totally separate files that are buffered separately.


Throw up an example and I’ll believe you :wink:


Hi Trey!

I think there might be a problem with maintaining the integrity of the amplitude on the range of frequencies in a complex sound. Attached is the OP’s example request of “PINK NOISE BOTH” (“PinkNoise.m4a”). It repeats so the entire sound is easily edited (my own audio capture).

Would You give this sound sample a go with your suggested method?

PinkNoise.m4a.zip (322.1 KB)

(Peter Juul Kristensen) #11

Hi all,

I really appreciate all your inputs and efforts. In this v4 I’ve updated a few things, added a preload screen and made a work around that’s far from perfect but I find it just a tad better than the regular loop function within Hype.

For every sound that needs to be looped, I’ve created to alike (A and B). Then I simply start A on the timeline, and then later start B and then return the timeline so it plays A again. While this by no means get reid of gaps, it’s (sometimes) a little better. For the “PINKNOISE both” the gap is almost overtime audible, but the “PERC loop” seems to be a bit for forgiving.

Let me know your thoughts.

(Unfortunately somebody thought this topic was advertisement so my my original post have been removed! and I am not able to post my latest version).

Let’s try this link


Hi Peter!

Nice job on the Pink Noise… just the first loop shows up as noticeable (but not objectionable) and from then on it is a smooth sonic experience - kudos!

The “PERC” loop is perfect.

(Trey Yancy) #13

Audition has a crossfade function that can take care of this. Create your loop with overlap, offset the two and set the crossfade at both ends to match.

(Trey Yancy) #14

The buffering stores the file. Triggering it is like repeatedly hitting a key on a poly sampler; playing back a file that is already in memory.