Professional HTML5 Mobile Game Development

Building a Sound System for Mobile

I would like nothing better than for the code in this section to become obsolete; it’s hackish and does things no game should have to do just to play some simple sound effects. Unfortunately, it’s also the only option that’s currently available to HTML5 game developers building mobile games. It’s not a great solution: Sound effects on iOS aren’t synced-up well on iOS, and preloading sounds isn’t allowed. Android has similar restrictions. Until the Web Audio API is available for mobile devices, sound support on mobile will be limited.

Using Sound Sprites

So what’s the solution? Sound sprites. Much like image spritesheets, audio sprites work by putting multiple sounds into a single audio file, separated by gaps of silence.

If you want a standalone library for doing this, there is the Zynga jukebox library, on GitHub at https://github.com/zynga/jukebox. It is a library for playing sounds on mobile devices and works in the same way as the code you add to Quintus does. Jukebox is designed to play on the widest range of devices possible, has been tested all the way back to Android 1.6, and includes a Flash fallback for older Android devices. The code in Listing 25-2 is targeted only at recent iOS and Android devices.

To make audio sprites work, on the first user interaction with the game (such as a touch of the title screen) the sound system starts preloading a single sound. When the sound is playable, the engine starts playing the sound at an initial ...