20 3 / 2011
Zap! - Html5 Audio Manager
As mentioned previously one of the most interesting and frustrating parts of building a browser-based games in html5 is the audio management. Handling the different browser idiosyncrasies and providing a common interface is an essential part of game development.
Zap! is an audio management library that provides an interface to the common functions required in games and interactive applications. Including:
- Loading, buffering and managing sounds
- Seamlessly looping samples
- Multiple audio channels
Zap! is being used as the audio engine in Animash and will grow and involve with the project to support more functionality.
Download and multiple examples on Github
07 3 / 2011
Boom! Crash! Zap!
So, the original plan was to tackle the character animation first but this seemed like a waste before a designer gets onboard, instead I decided to stray into the minefield that is HTML5 audio.
The original thoughts were to use an existing library such as SoundManager2 or jPlayer to manage the in-game sounds and music. Although this would have meant introducing a flash fallback I’m not that fanatical over completely avoiding flash if it could provide a better experience.
However, after integrating SoundManager2 it was quickly obvious that the latency introduced was unacceptable and unpredictable - In all honesty I was also uncomfortable giving over such an important piece of the puzzle to 3rd party code. Unfortunately the problems with using html5 audio for games are numerous:
- The loop property is glitchy and introduces a gap at the end of each loop, rendering it useless for many in-game uses.
- The audio tag does not support multiple channels so cannot be started whilst it is already playing.
- Latency is variable as the tag doesn’t seem to be designed for real-time use, however the most recent versions of browsers seem acceptable n this department.
The next post will cover how to tackle the multi-channel issue, this I think is the most important element apart from latency which is largely out of the developers control.
