HTML and CSS Reference
In-Depth Information
"loop": false
},
"paddle": {
"start": 4,
"end": 4.04,
"loop": false
}
},
"autoplay": "silence"
}
Because the audiosprite tool just takes a list of files and generates both the combined file and the JSON, it's
an easy tool to include in your build process to make generating sound sprite files slightly less painful.
Adding Sound Sprites to the Game
To get sound sprites into the
Block Break
game, you need to make only a couple of minor changes to the loading
code to load the
audiosprites.json
file and tell the engine to use that JSON file as the audio sprites.
Modify the highlighted code in the
Q.load
callback in
blockbreak.js
to read:
Q.load(['blockbreak.png','blockbreak.json','audiosprites.json',
'paddle.mp3','block.mp3'], function() {
Q.compileSheets('blockbreak.png','blockbreak.json');
Q.audioSprites("audiosprites.json");
Q.scene('game',new Q.Scene(function(stage) {
If you run this game on a mobile iOS or Android device, you should now have sound. On iOS the sound will
be a little choppy and not particularly well synced, but it's unfortunately the best that can be done within the
limitations of the medium.
Looking to the Future of HTML5 Sound
Although HTML5 audio on mobile devices is in a particularly bad state, the situation on the desktop isn't that
much better. Of the current generation browsers, IE9 actually has the best performing
<audio>
tag support.
Other browsers (Chrome in particular) actually regressed during 2011 and added new issues with
<audio>
tag
playback. These are slowly being fixed, and the long-term outlook for game audio on HTML5 is bright.
In particular, the Web Audio API is particularly impressive. (See the spec at
www.w3.org/TR/webau-
dio/
for more details.) However, because the Web Audio API is only available in Chrome and Safari on the
desktop at this time, it will be a while before there is a performant, low-level sound API that is cross-browser
supported, so it may still be for a while yet that the
<audio>
tag is the game engine building block of choice.
