Audio not looping seamlessly in Firefox, Edge and Explorer but correct in Chrome

I guess the problem is not PlayCanvas related but maybe yes.

When I’m looping a sound, there is a little pause between each play. This problem occurs in Firefox, Edge and Explorer. But the sound is looping well in Chrome. You can view this problem simply by launching this exemple from PlayCanvas website.

My questions are:
How can I have a seamlessly looping sound in all browser?
Is it currently possible?
Is it PlayCanvas related?

Thank you :slight_smile:

After reading your post I doubted so I double check my saying:

I tested on 3 different computers (Win10 and Win7). I ran the exemple linked in my original post. The results were clear:

  • Firefox/Edge/Explorer: On all computers the sound is not continuous when looped. Here is a recording I did with an external recorder of what I hear: recording(Firefox, Edge, Explorer)

  • Chrome: On all computers the sound is continuous when looped. I also recorded it so you can understand what is different: recording(Chrome)

For those who prefer an image instead of recordings, here is a picture of both audio recording with annotations.

This might have to do with the file being looped in that example being an mp3 file. My understanding from a bit of research about this is that mp3 files must have a gap in the beginning. Try converting your looping sound to an .ogg file using Audacity and check again. But before you convert it to ogg make sure you remove any gaps from the mp3 file first.

But the problem is, @vaios, is that OGG is not supported in all browsers. It’s just a Chrome/Firefox format.

All I’m saying is that it seems that mp3 files must have a gap in the beginning and chrome somehow works around that while other browsers probably don’t.

So one way to verify that is by trying a different file format. I’m not sure we can fix this.

I did a test with OGGs and MP3s of different length: project

@vaios is right, MP3 files don’t loop well and OGG loops seamlessly.
Now that I know this, my problem become the one brought by @will.

I understand the problem and I wish I can help you on this one but I don’t currently have the knowledge to do it. :slight_smile:

I think the easiest way for you to fix that would be to allow having sounds in multiple formats, and it depends on the browser which one is (pre)loaded/played. (Easiest would be to allow multiple uploads. Even better would be to upload WAV or anything we want to, and PlayCanvas automatically converts them into the best formats for each platform.)

We’re currently in the same situation as lapinchatware. We can’t use WAV because they’re too big, we can’t use MP3 because they don’t loop seamlessly, and we can’t use OGG or AAC (not sure if AAC loops seamlessly though) because they’re not supported in Safari or Firefox respectively.

In the end we use WAV, even though it means that sound loading times are abyssmal.

Could there be an option to start an mp3 from a specific time? Effectively skipping the gap?

Edit: Oh wait, it’s already there in the Sound Slot.

Yeah, and I might’ve made some mistake when I tried it, but I think it’s not fine-grained enough; with the sound I used, there was still a small hiccup whenever it looped.

I’m doing a quick test here: https://playcanvas.com/project/525302/overview/audio-loop-test

Firefox 57.0b12 (64-bit)
macOS 10.13.1 (17B1003)

Loops fine without pause to my ear.

Edit: Actually, there is a slight pause on Chrome. :confused: Looking more into it now

Firefox 56.0 (64b-bit), Windows 7 x64: I think there’s a pause.

I’d recommend using a different sound though, e.g. short white noise, as that would be easier recognizable. (And you might want to test various mp3s with different lengths; even though one might work that might not be the case for another.)

Thank you guys for your thoughts and tests.

I’ve updated my test project with ACC (.m4a) audio files and I’ve added browser detection and a basic optional autoselection of the right audio format for the right browser. Have a look.

I did a basic research and looked at other engines. My conclusion is simple: there is no magic. OGG is best for almost every browser (edge 17 when ready) but IE and Safari. For those last two MP3s works.

ACCs have the same effect than MP3s.

All this is known informations but I needed to test it to better understand the situation and it’s maybe usefull informations for someone else.

@yaustar, @TobiasW, your idea is interesting and I’m looking forward for the result you will obtain with this. I havn’t tested it myself but I also think that it’s probably not fine-grained enough to be as good as the use of OGG format.

I also agree with the recommendation of using a white noise as a test to better detect a possible glitch between loops.

1 Like