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

2. About us Craig Robinson craig@absoluteherogames.com –Absolute Hero –Mobile games –Multimedia software 2 Martin Reurings martin.reurings@spilgames.com –Spil Games –Webbased UI’s –Ajax before it had a name

3. 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…

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

5. 5

6. 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. 7

8. 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

9. Playing a sound on Desktop 9

10. 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

11. Playing low-latency audio on Mobile 11

12. Codecs 12 Source: http://html5doctor.com/html5-audio-the-state-of-play/

13. Mobile browser codec support 13 Source: http://html5doctor.com/html5-audio-the-state-of-play/

14. 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

15. Handling different Codecs 15

16. 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 (https://github.com/tonistiigi/audiosprite)https://github.com/tonistiigi/audiosprite 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

17. Using Sound-Sprites 17

18. This too shall pass. ~ancient proverb~ 18

19. 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

20. Simple routing 20 Source: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

21. Advanced routing 21 Source: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

22. Testing for availability 22

23. Loading and playing a sound 23

24. Loading and playing a sound 24

25. Use with HTML5 audio tag to support streaming 25

26. Use with HTML5 audio tag to support streaming 26

27. Demo 27

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

29. Resources https://dvcs.w3.org/hg/audio/raw- file/tip/webaudio/specification.htmlhttps://dvcs.w3.org/hg/audio/raw- file/tip/webaudio/specification.html http://www.html5audio.org/ http://uglyhack.appspot.com/webaudiotoy/ 29