The state of Audio in HTML5 Games

HTML5 Gaming for desktop and mobile is a very trendy topic these days. The performance of canvas applications is getting better and better each day and technologies like CocoonJS or Ejecta even enable a close to native performance for canvas applications on mobile devices. – But what about audio? Is it really that easy to implement sound with your html app?
This article features some interesting points that I collected while researching for my eBook ‘From Zero to the Appstore’.

Audio != Audio

While most browsers and devices already do support audio in general, that doesn’t mean you can just play any audio file in any modern browser. The following table briefly lists the support for Audio-codecs.

Browser	Codec Support
Chrome	Ogg, MP3, WAV
Firefox	Ogg, WAV
Internet Explorer (9+)	MP3, AAC
Opera	Ogg, WAV
Safari	MP3, AAC, WAV

Android	Depending on the Device
Blackberry	MP3, AAC
Mobile Safari (iPhone, iPad, iPod Touch)	MP3, AAC
Opera Mobile	Depending on the Device

As you can see there is no single codec and format that is supported by all browsers and devices. In addition to this not every device does support the WebAudio-API and some devices only allow audio-playback upon a user-interaction or only allow playing one sound at a time. So what should you do? Setup an audio file for any codec and then check the browser’s support before loading and playing the file? While this would be currently the only way to do it right, this not only sounds like a lot of work, but also is. What about browsers that don’t support the audio-element at all? – Implementing a flash fallback is no easy task as well.

SoundJS

One possible solution is SoundJS – SoundJS is a JavaScript framework that will take care of all the compatibility issues with audio on different devices and even adds the ability of a flash-fallback should the browser support no audio. You would still have to provide different files for each sound to ensure that a soundfile is available for each device depending on the codec support but besides this, playing a sound with SoundJS can be done with 2 lines of JavaScript:

var src = ‘mySound.m4a|mySound.ogg’;
createjs.Sound.registerSound(src);
//…after the sound was loaded, it can be played by:
createjs.Sound.play(src);

var src = ‘mySound.m4a|mySound.ogg’;

createjs.Sound.registerSound(src);

//…after the sound was loaded, it can be played by:

createjs.Sound.play(src);

What I also like about SoundJS is that it features a plugin-system, so you can write your custom playback-plugin for individual needs, for example I used it to write a CocoonJS-plugin for it.

howler.js

Another solution is howler.js, it is also released under the MIT license, so you can use it free in any of you projects it works very similar to SoundJS. One advantage over SoundJS is that it is very lightweight with only 9kb and offers pretty much the same functionality as SoundJS – with one exception though: howler.js features no flash-fallback, but if you are targeting mobile platforms, this should be no problem.

var sound = new Howl({
  urls: ['mySound.m4a','mySound.ogg']
}).play();

var sound = new Howl({

urls: ['mySound.m4a','mySound.ogg']

}).play();

Another thing I like about howler is the support of sound-sprites:

var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 1000],
    laser: [2000, 3000],
    winner: [4000, 7500]
  }
});

// shoot the laser!
sound.play('laser');

var sound = new Howl({

urls: ['sounds.mp3', 'sounds.ogg'],

sprite: {

blast: [0, 1000],

laser: [2000, 3000],

winner: [4000, 7500]

}

});

// shoot the laser!

sound.play('laser');

SoundManager 2
A third option is SoundManager 2, (github), just like SoundJS it features a flash fallback if HTML5 audio is not supported. SoundManager2 is used by popular site like SoundCloud, last.fm or the Nyan Cat site. The focus of SoundManager2 is more on implementing audio-players on web-sites as it also features UIs for audio playback. Sounds are played like this:

// create "mySound"...
soundManager.createSound({
  id: 'mySound',
  url: '/path/to/an.mp3'
});

// ...and play it
soundManager.play('mySound');

// create "mySound"...

soundManager.createSound({

id: 'mySound',

url: '/path/to/an.mp3'

});

// ...and play it

soundManager.play('mySound');

Comparison

As you can see, all three frameworks have their pros and cons, you should check out their sites and see what features you need for your project. The following table is just a very brief overview on the differences:

Feature/Player	SoundJS	howler.js	SoundManager 2
Automatic playback of the correct codec/format	Yes	Yes	Yes
Flash fallback	Yes	no	Yes
Size (no gzip)	25kb	9kb	34kb
Sound Sprites	No (can play with offset)	Yes	No (can play and stop at offset)
License	MIT	MIT	BSD
Best used for*	All-rounder, probably best used in combination with the CreateJS suite	games/mobile apps	Websites, mobile sites as an audio player

*this doesn’t mean that you cannot use it for other cases, it’s just my personal evaluation

A last word: Beware of MP3!

What a lot of people probably don’t know: MP3 is not free!
Implementing mp3 into your app/game is no problem, but what you should know is that if your game is ‘distributed’ (technically that includes 1 user playing the game in his browser) more than 5000 times, you have to pay an mp3 codec royalty of $2500. But not only because of the licensing I would suggest you to use Ogg Vorbis(.ogg) or AAC(.m4a, MP4), OGG and AAC do have a better sound-quality while encoded with a smaller file-size than their MP3-counterpart.

If you want to learn more about the workflow of implementing audio into your html5- (mobile-) app/game and additional information on creating and publishing an HTML5 game, you should checkout my book at: http://indiegamr.com/zerotoappstore/