Forums » Help » Background Music - Looping Short Clips without Lag?

I'm starting to add sound effects and background music to my game and so far it's been straight forward and easy. One issue I am having is that for background music, my approach was to just have short music clips that sound good when looped. I have a fair amount of audio experience so I have made music and trimmed it to short clips that are only a few seconds long and sound good when looped continuously from any audio player in Windows.

My issue is that when I play these little loops as background music with .loop set to true from within the game, I can here the seam where the file ends and then starts again as silence at a fraction of a second. This makes doing this not sound good at all, unless I factor this playback lag into my audio clip and do things like shorten it by maybe .25 seconds where silence fits into the beat, etc.

My question is that is this 'playback lag' due to the browser and is there a way around it? I am seeing this in Chrome and haven't tried other browers yet to see if it is consistent and can just be factored into the sound file itself. I wanted to loop short clips that are only around 20kb instead of having a couple mb music sound file that lasts most or all of a level to make things load quicker.

I am preloading audio files as assets as well just to throw in that information!

Well so far I have seen that Safari has a bit more 'lag' when playing sound files then chrome, and IE9 RTM seems to have no lag at all to me. This playback variation means I can't factor this into the actual sound files themselves due to the different browsers and computer capabilities. I guess this was kinda expected. I don't really want to make people download a couple minute mp3's at up to a few mb's so I'm kinda stalled on background music for each level. Otherwise sound effects are working pretty well!

BFresh, I have little to no experience with audio, so just thinking outloud: is it possible to download a short audio clip - say 5 secs - and then create a new audio file from that (using javascript/Impact) that has say 20 of those clips stitched together in sequence?

To draw an analogy from the image world, I know it is possible to draw an image to a hidden canvas element and then use that image as a bitmap source as in this article HTML5 canvas caching.

That's a pretty interesting idea MikeL. It seems like you could do that, but I am really unsure if the file processing and caching to do it would cause too much overhead or not and be better just downloading the whole thing once to begin with... I really have no clue about that!

Where I am at now is I have added background music and sound effects to my Mutant Zombie Monsters game officially online now and it seems to run ok. I've got 5 songs at 3 or 4 minutes each that I made mono at 64kbps to save on filesize and they still sound just fine for background music. Then I've got maybe 20 sound effects at around 20kb each. So in all, my code is about 1mb, my images are about 1mb, and my audio is about 7mb...

All of my audio and most of my images are preloaded as assets and I would have thought a good 8-9mb of loading would be too long but it still only takes a couple seconds from my tests with various connections, so I think its ok. I didn't want people to wait too long at the loading screen and leave the page. So... I'm considering my audio issue resolved at this point!

Hello, I'm french composer and Sound designer.

MP3 has a 0,25 seconds piece of silence at the start of the audio file.

Probably this contains meta.

To avoid silence in looping audio : make ogg, or wav. WAV render the fully audio spectrum, the ogg is the same quality as MP3, but without this silence in start.

I worked for videogames, in one project for iPhone, we had to make mp3 because of the memory space, but we couldn't make MP3 (or AAC to).

Developin' Staff get this solution : make start loop and sound for every sample at T = 0,25, so there were a preloading of all of the audio file, but play and loop after 0,25 seconds.

Sorry for my english, and have a good day.

I worked for videogames, in one project for iPhone, we had to make mp3 because of the memory space, but we couldn't make MP3 (or AAC to).

==>We couldn't make OGG (or AAC) ^^

@Zakann - i understood what u said, that was genius to start playing at T=0.25!

Hi guys, is it possible to do that with impact? starting a clip at 0.25 seconds if it's mp3?

Looping clips sound awful!!

I don't believe there's any method to do that in Impact - and outside of the currently Chrome-only Web Audio Data API, I don't believe there's any way to do it at all in HTML5.