Forums » Help » Preload sound and music?

OK, so I thought Impact just went and preloaded everything... but that doesn't seem to be the case. In testing my game over the weekend on a laptop I had sounds that weren't playing and a couple times, using Chrome, where a sound effect caused the background music to stop playing - thought that's probably a different issue.

I found this in the docs about audio:

"All instances of ig.Image, ig.Font, ig.AnimationSheet and ig.Sound that are created during load-time will be appended to the preloader's chain of assets to load. Images and Sounds that are only created at runtime, will not be loaded by the preloader."

So... I'm not really sure what I need to do. I create all my audio, both sounds and music, at runtime - I didn't use weltmeister at all. I have eight different game classes that are swapped out with ig.System.setGame()... How do I preload assets in the first game class? And is this the proper approach?

When you declare your sounds/images in the class' definition (not in a method like init() or update() etc. but on the same level as those methods) they will be included in the preloader, but any created inside a method will load at runtime. In order for the engine to pick up all the assets used in your game, they need to appear in the requires() section. Generally, all the entities get included via the level files.

I'm not 100% sure on the best way to preload from multiple game classes, but I think if you include your game classes inside the requires() block in main.js, any modules brought in with that game will get added to the preloader as well. I have been using multiple game classes for when the gameplay changes (i.e. my boss level has different mechanics and logic than the regular levels, so it's a separate game class.)

I did as you mentioned and require all my game classes in the initial start game class. Looking in dev tools at the network requests I can see that all the image assets are being loaded... However, not one sound asset is being loaded.

In start screen class I require the level one class - and it's image assets are loaded. In the init method of level one I have this:

ig.music.add(new ig.Sound('media/music/bgsound_l1.*'), "l1");
ig.music.add(new ig.Sound('media/music/bgsound_l2.*'), "l2");
ig.music.add(new ig.Sound('media/music/bgsound_l3.*'), "l3");
ig.music.loop = true;
ig.music.volume = .5;
ig.music.play("l1");

this.hatSound = new ig.Sound('media/music/hatCatch.*');

Not one of those files is being preloaded...

Oh... not in a method like init() or update()

NOT in... let me try again...

Actually, how do I do this:

When you declare your sounds/images in the class' definition (not in a method like init() or update() etc. but on the same level as those methods) they will be included in the preloader


ig.music.add(new ig.Sound('media/music/bgsound_l1.*'), "l1");
ig.music.add(new ig.Sound('media/music/bgsound_l2.*'), "l2");
ig.music.add(new ig.Sound('media/music/bgsound_l3.*'), "l3");


Not sure how to declare them outside of a method...

OK, I think I figured it out - I just do like so in my initial game class before the init method:

music_l1: new ig.Sound('media/music/bgsound_l1.*'),
music_l2: new ig.Sound('media/music/bgsound_l2.*'),
music_l3: new ig.Sound('media/music/bgsound_l3.*'),

I now see the files being preloaded...

Still nothing happens in Safari though. I just get this error:

'undefined' is not a constructor (evaluating 'new Audio()') in sound.js line 13.

That's exactly how to preload music tracks :)
I'm not sure about the Safari issue, I'm afraid, though. Is it working in other browsers? There's a thread on here about the latest Safari not playing sounds properly. HTML5 Audio is pretty crappy all-around right now.