Seamless Audio Loops in Phaser

[kleepklep]

I'm working on a game with seamless background music and figured I'd share my findings to help others. I'm just using Phaser's standard sound.play('', 0, 1, true) code to play loops. (Have since discovered I can also use sound.loopFull()). I didn't want to mess with outside solutions like seamlessLoop.js, which I'm not sure would work across all browsers anyway.

Here's the run down on the file formats:

OGG - Good for seamless loops in Firefox and Chrome.

M4A - Good for seamless loops in iOS. When I first posted this I thought that I was stuck using the Apple Lossless codec (lossless = huge file sizes) because when I used any other M4A generating codec the resulting audio had blank space added at both ends. I wound up using the fre:ac open source audio converter which adds information for gapless playback according to its developer, who was extremely responsive and helpful (Thanks Robert!). Sure enough, the audio played seamlessly on my iPad with much smaller files.

MP3 - Not good for seamless loops, but needed for IE. Even if your MP3 has no silence on either end, when the sound is done playing there will be a small audio gap before it loops. There are some techniques like the ones here that seem promising, so if I can overcome this issue I will post the code.

Good for all other use cases because all browsers support it and it has the smallest file size of the three formats when exported with reasonable quality settings.

 

So here's what I'm using to load my seamless loop audio. M4A is in a separate conditional because when I put it as the first option Firefox would load it instead of falling back to OGG and not play the sound. I'm loading all my other sounds as MP3s (in a different code block - not shown) to keep my total file size as low as possible.

// load seamless intro audio
loadLoop('musicIntro', 'intro_music_loop');
function loadLoop(key, file) {	
	if (game.device.iOS || game.device.macOS) {
		game.load.audio(key, ['sounds/' + file + '.m4a']);	
	} else {		
		// Firefox and Chrome will use OGG		
		// IE11 will fall back to MP3, which will have a small gap at the end before replaying		
		game.load.audio(key, ['sounds/' + file + '.ogg', 'sounds/' + file + '.mp3']);	
	}
}

Hope someone finds this helpful

[kleepklep]

My first attempt to seamlessly loop an MP3 using a marker failed. I noted the duration of my original MP3, copied a piece of the front of it onto the tail end, loaded in the extended file and used the code below. There is still a gap in IE

music.addMarker('loop', 0, 7.594666666666667, .25, true);music.play('loop');

Will try some two sound trickery next.

[namklabs]

On 1/7/2016 at 11:21 AM, kleepklep said:

I'm working on a game with seamless background music and figured I'd share my findings to help others. I'm just using Phaser's standard sound.play('', 0, 1, true) code to play loops. (Have since discovered I can also use sound.loopFull()). I didn't want to mess with outside solutions like seamlessLoop.js, which I'm not sure would work across all browsers anyway.

Here's the run down on the file formats:

OGG - Good for seamless loops in Firefox and Chrome.

M4A - Good for seamless loops in iOS. When I first posted this I thought that I was stuck using the Apple Lossless codec (lossless = huge file sizes) because when I used any other M4A generating codec the resulting audio had blank space added at both ends. I wound up using the fre:ac open source audio converter which adds information for gapless playback according to its developer, who was extremely responsive and helpful (Thanks Robert!). Sure enough, the audio played seamlessly on my iPad with much smaller files.

MP3 - Not good for seamless loops, but needed for IE. Even if your MP3 has no silence on either end, when the sound is done playing there will be a small audio gap before it loops. There are some techniques like the ones here that seem promising, so if I can overcome this issue I will post the code.

Good for all other use cases because all browsers support it and it has the smallest file size of the three formats when exported with reasonable quality settings.

 

So here's what I'm using to load my seamless loop audio. M4A is in a separate conditional because when I put it as the first option Firefox would load it instead of falling back to OGG and not play the sound. I'm loading all my other sounds as MP3s (in a different code block - not shown) to keep my total file size as low as possible.

// load seamless intro audio
loadLoop('musicIntro', 'intro_music_loop');
function loadLoop(key, file) {	
	if (game.device.iOS || game.device.macOS) {
		game.load.audio(key, ['sounds/' + file + '.m4a']);	
	} else {		
		// Firefox and Chrome will use OGG		
		// IE11 will fall back to MP3, which will have a small gap at the end before replaying		
		game.load.audio(key, ['sounds/' + file + '.ogg', 'sounds/' + file + '.mp3']);	
	}
}

Hope someone finds this helpful

This was extremely helpful. I couldn't figure out why my MP3 music wouldn't loop cleanly. An OGG fixed the problem. Thank you so much!