Real-World Game Audio Development with HTML5 Craig Robinson, Absolute Hero Martin Reurings, Spil Games

About us Craig Robinson –Absolute Hero –Mobile games –Multimedia software 2 Martin Reurings –Spil Games –Webbased UI’s –Ajax before it had a name

3 What's out there? Let's get a feeling for the landscape of HTML5 audio shall we? It can't be all bad after all…

HTML, audio after the silent years, remember the midi-tracks? Flash, good enough while it lasted 4

5

HTML5 Audio vs Web Audio API, a ray of light, tainted by fear –Fragmented codec support –Autoplay got disabled –Only 1 sound at a time Web Audio API, the promised land –We’ll get back to this 6

7

HTML5 Audio in Desktop Browsers Fast response Multiple streams Fragmented codec support Solid codec detection Supported in: Chrome, Safari, IE9+, Opera Chrome and Safari support Web Audio API, with support for FireFox just around the corner (FF 23)! 8

Playing a sound on Desktop 9

What about Mobile? There seems to be a difference of opinion iOS5, audio-tag, but only on user-interaction, only 1 stream iOS6+, same support but Web Audio API Android 4, audio-tag, only on user-interaction, only 1 stream Windows Phone, not enough market-share yet. BB10, audio-tag Latency, let’s get around that 10

Playing low-latency audio on Mobile 11

Codecs 12 Source:

Mobile browser codec support 13 Source:

Codecs Commonly supported audio codecs –ac3/aac –mp3/mpeg-1 –ogg/vorbis –m4a/h.264 Ogg FTW? Just in case, there’s people creating JS decoders for unsupported Codecs! 14

Handling different Codecs 15

Right, audio-tag, it's been around Pros –Widely supported –Built in capabilities for streaming/buffering Cons –User-interaction only, or the sound takes a long time to load, no snappy sound-effects here Solutions –Audio-sprites, yay!! Easy to make with NPM and ( In Chrome, server must support byte range requests FF doesn't support seeking in.ac Chrome doesn't support seeking in.ogg Ok, never tested in IE, no noticeable market-share… 16

Using Sound-Sprites 17

This too shall pass. ~ancient proverb~ 18

Web Audio API – What is it? JavaScript interface to access advanced native audio capabilities Modular, graph-based to support complex mixing and effects Allows playback of sampled audio and audio synthesis Integration with media element Spatialized audio and advanced filter effects Ability to synthesize and process audio stream in JS code Provides sample accurate scheduling and low latency Can play multiple, simultaneous sounds! 19

Simple routing 20 Source:

Advanced routing 21 Source:

Testing for availability 22

Loading and playing a sound 23

Loading and playing a sound 24

Use with HTML5 audio tag to support streaming 25

Use with HTML5 audio tag to support streaming 26

Demo 27

Three things to remember A bit of trouble, but it’s not that bad! HTML5 tag --> Web Audio API Desktop audio != mobile audio 28

Resources file/tip/webaudio/specification.htmlhttps://dvcs.w3.org/hg/audio/raw- file/tip/webaudio/specification.html