30 1 / 2013
Howler.js allows you to define an array of URLs for different versions of your sound and it will only load the one the current browser supports, either into the Web Audio API or into a normal HTML 5 audio element. The audio element already allows you to define multiple codecs, but the Web Audio API does not. For that, you have to implement your own loading of audio files over XHR and detection of what codecs the browser supports is key so you aren’t loading all of them and wasting bandwidth. Howler.js implements all of this for you, as well as some caching behavior and provides a nice API for it.
Another feature of Howler.js that is pretty interesting is the ability to define “audio sprites”. You may have heard of image sprites as a way of combining multiple small images into a single one to save HTTP requests. Audio sprites are a similar idea for short sound effects. They combine multiple sounds into a single longer one, and only play back the time regions you request. Howler.js has a nice API for this allowing you to define named time regions within an audio file for each effect and then play back these named regions instead of the whole file. You can even play back multiple regions simultaneously even though it is technically one file. This is a pretty cool feature that should make sound effects especially for games much easier.
As I’ve said many times, we’re just getting started with audio on the web. Howler.js looks like a nice way to load and play back audio cross browser. You can check out the documentation and demos here, and the code on Github.