There is always a gap on my Audio Loop in Safari

Question

SITUATION:

It works fine on Chrome. But there is a small gap every time the "Waterfall 1" sound loops, only on Safari.

---

WHAT I TRIED SO FAR:

1. With the HTML 5 audio element:

   audio.addEventListener('timeupdate', function(){ var buffer = 0.44; if(this.currentTime > this.duration - buffer){ this.currentTime = 0 this.play() }}, false);

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

3. Howler.js https://github.com/goldfire/howler.js

4. Web Audio API alone: How to seamlessly loop sound with web audio api

---

QUESTION:

How can I get rid of the gap in the audio loop in Safari ?

Answer 1

I had the same issue and I resolved it by using a file format other than mp3.

I would also highly recommend using howler.js!

Here is a detailed article that might help: https://www.kevssite.com/seamless-audio-looping/

While looking for a fix to this I learnt that part of the ‘pause’ problem is caused by using mp3 as the audio file format. Apparently there is a bug (or maybe its a feature!) in the mp3 spec that adds a few ms of silence at the start of the track. If you load a track into an editor like audacity you can see the gap. You can edit the track to remove the silence, but it’ll be back when you re-load it. I recommend using the ogg format instead of mp3 as ogg does not add any silence to the start of the track. Switching to the ogg format certainly made an improvement but there was still a small pause between loops.

Incidentally just converting from mp3 to ogg won’t remove the silence automatically. You’ll need to load the mp3 into an editor, remove the gap from the start of the file, then export the track in the ogg format.