Seamless audio looping in WebGL

After spending the last 2 hours trying to make loopable audio in WebGL, I decided to ask for help here.

I’ve read many topics where suggestions were to use OGG and how changing the sample rate magically fixed someone’s problem, but none of these solutions work to make audio perfectly loopable in WebGL. There is always a gap, pop, crack, or something in between.

The audio loops perfectly outside of Unity, in the Unity editor, and in standalone builds, but I can’t get the sound to loop seamlessly in the WebGL build.

Can someone point me in the right direction?

P.S. And maybe someone can prove to me that it is even possible?
Here’s the audio file I’m working with:
test_loop.zip (40.1 KB)

Hi!

the Audio support on the Web platform converts all audio files to the AAC format because that format has the best browser support across platforms. In earlier versions of Unity there was a bug that caused the loop points set in the meta data to be lost during that conversion. This bug is fixed but it could be that you need to re-import your audio assets if you load a project that was created with an older version of Unity. That’s probably why changing the import settings such sample rate seem to magically fix the issue.
Here is a link to this bug and in which versions it was fixed: Unity Issue Tracker - [WebGL] A looping audio sounds different on WebGL than in the editor/native desktop player

Problem presented even in 6000.0.23f1
Maybe it’s not that noticeable now, but still

Hey @grox777!

I did work on this fix and I’d like to clarify. The issue referenced by @MarcelPursche is related to embedded loop points in WAV files, especially for loop points different from the beginning or end of the file. This information was originally lost in the WAV–>AAC/MP4 conversion, but we were able to correct that by “manually” adding the loop information in the MP4 metadata and reading it from the javascript audio engine implementation.

Now the problem of a file looping seamlessly from end to start is different, and quite problematic actually. To do this WAV–>AAC conversion, we have to rely on the host system AAC codec, because it’s a licensed format. Apparently, on Windows this codec behaves differently than other encoders (such as ffmpeg, afconvert on Mac and avconv on Linux) and it alters the first frame (1024 samples) resulting in a kind of fade-in. This happens because this AAC encoder implementation uses these samples to prime the encoder.

So we DO actually loop “perfectly” from the last to the first sample, but the first 1024 samples of the audio file data serialized in the build are altered, resulting in the audible glitch.

Two things you can try:

  1. Make your game build from a Mac or Linux editor.
  2. Use WAV as source file format, add some silence at the beginning of your sound (smoother attack maybe?) and edit the file’s smpl chunk to move the loop starting point forward

I’m honestly really sorry about this quirk. I love the web platform and try to give it as much love as possible, but it has the most interesting AND frustrating challenges because of its unique audio context nature.

Thanks for detailed response, i will try these things you suggested

Problem still seems to be present in 6.2. I don’t really know what to do, I am building from a Mac (ARM), I’ve tried .wav and .ogg. There’s just a tiny bit of silence when enabling “loop” on an audio source, but it’s enough to be kind of annoying. Hopefully this is still being looked at, but I understand how limited WebGL is. For now I’m stuck with the band aid solution of cycling between 2-3 songs like a playlist and avoiding loops all together. It’s quite time consuming to compose 2-3 songs per a section in the game (as a solo dev) but I suppose there could be worse problems.

Thanks! Your second solution worked. In the wavosaur sound editing program, I added 2048 samples of silence to my car engine sound (more than 1024, to give it some breathing room), or 0.046 seconds for a 44.1 kHz track. I also set loop points after the silence and at the end of the track. Then I saved the file as a wav file, and when I built it for the web, the pauses between sounds disappeared. I hope this helps someone else.

1 Like