How to use create.js for seamless background music?

[trial]

Hi, after browsing the web for hours, I managed to find a code that sort of works:

 

 

1. createjs.Sound.on("fileload", handleLoad);  
2. createjs.Sound.registerSound("https://s0.vocaroo.com/media/download_temp/Vocaroo_s03IOthwckn1.mp3", "bgmLoop");  
3. function handleLoad(event) {  
4.   var bgmLoopInstance = createjs.Sound.play("bgmLoop", {  
5.   interrupt: createjs.Sound.INTERRUPT_ANY,  
6.   loop: -1  
7.   });  
8. }  

 

The problems are:

1. The music doesn't loop seamlessly, there's a gap before it starts back again.

2. The music doesn't start in desktop Firefox and Chrome.

 

Anyone have any ideas how to fix?

 

I heard howler.js does loops seamlessly, but I have no idea how to use it together with createjs in Animate CC.

[b10b]

Consider that mp3s don't loop seamlessly by default - they require dedicated and specialist approaches to avoid the apparent lead-in and tail fades created by the encoder.  As a simple solution it may be better to switch to mp4 and ogg - neither will create genuine seamless loops, but their gaps are less apparent (in my experience) and the formats solve other problems (licensing and compatibility).  The choice of music, and where the cut is made is also another easy win.  And remember, looping 4 times in the audio file will reduce the apparent gaps by 400%  

@trial beyond that, there are ways to achieve genuine seamless loops, but I'm not sure if they're worth the effort to describe or implement if your focus is using Animate CC?

[trial]

I tried ogg and m4a. ogg seems to work best in firefox, with barely any gaps. but when i use m4a, there's still gaps in safari. chrome seems to still have gaps no matter which format i use.

The only way is to not use music that loops, or no music at all?

[b10b]

3 hours ago, trial said:

The only way is to not use music that loops, or no music at all?

You decide.  Have a quick play on any of my games (http://b10b.com) - to date, all are using CreateJS / SoundJS and have looping music.  No special encoding techniques used, just the "easy" methods I described (plus a healthy dedication to precision).  Is it perfectly seamless? no ... Is it acceptable? totally.

Just a thought ... are you running your game through a http server?  If not then "localhost" will degrade SoundJS to HTMLAudio, where gaps are often more significant.

[trial]

3 hours ago, b10b said:

Just a thought ... are you running your game through a http server?  If not then "localhost" will degrade SoundJS to HTMLAudio, where gaps are often more significant.

I was using locathost. I tried putting it up on github, used m4a & ogg sounds. Now all desktop browsers are playing it seamlessly! iOS sometimes seamless, sometimes not.

I notice your stockcarhero game's menu theme loops seamlessly in mobile. What's the code you use for it to get it that way?

[b10b]

@trial I'm pleased that worked out for you!  Lucky shot on my part.

23 minutes ago, trial said:

I notice your stockcarhero game's menu theme loops seamlessly in mobile. What's the code you use for it to get it that way?

Nothing special ... Sound.play() using the "loops" parameter.  I'd bet there's still a 10ms gap in there, even with ogg - but the style of music and cut of the loop can make a big difference to perception.  Another trick (not used here) is to have some ambient sound effect looping at the same time, but out of phase with the music loop - so there will never be "silence".

[trial]

With your tips, I managed to get it to work well by doing:

- using ogg with m4a as alternative format.

- followed preloadjs tutorial I found on the web.

- added "touch to start" button for mobile.

But now, the sound still plays even after I close the web browser or lock phone. I notice your car racing game pauses even after closing the phone browser.

What codes do I need to do this to pause all sounds/animations?

[b10b]

17 hours ago, trial said:

What codes do I need to do this to pause all sounds/animations?

Hook up a method to check for "document.hidden" (and then mute or unmute accordingly) when the document receives a "visibilitychange" event.  Note "document.hidden" might still be vendor prefixed?

[trial]

Thank you so much. You've been a very big help!

I've managed to get audio to pause when viewed on Safari browser. It's working very well, but another obstacle cropped up. When saved as a standalone web app on the home screen for ios, the sound still plays, even after the screen is locked.

I found a way to detect if the page is opened as a standalone home screen app, but I can't seem to find any codes that will detect if the screen is locked. document.hidden doesn't seem to work. Does anyone know a way to detect when screen is locked?

[b10b]

I believe that once the screen is locked, no further JS execution occurs, hence the "visibilitychange" event never fires (so mute is not activated).  This is appropriate behavior and also prevents any hacky JS suggestions.

You might want to listen for a "document.blur" event?  I'm doubtful it'll be fired either (if going directly from web app to lock via hard button), but probably higher chance than the visibilitychange?