HTML and CSS Reference
In-Depth Information
As a workaround to this limitation, HTML5 game developers quickly discovered that after a sound had been
loaded, if you assigned its source to another, different audio element, the sound effect wouldn't be downloaded
again but would start playing almost immediately. This led to a design of game audio systems that had a number
of pre-created
Audio
objects that were used as channels to play sound effects.
To make this work, it would be the audio system's job to keep track of which of the channels were still play-
ing audio and add any new sound effects only to channels that weren't in the middle of playing.
Adding a Simple Sound System
In Chapter 10 the asset loader code has some functionality for loading sound files based on supported formats.
This means that the loading side of things is already built. The only piece of code needed is setting up the chan-
nels and playing back audio where appropriate.
This example adds sound to the Block Break example from Chapter 11, “Bootstrapping the Quintus Engine:
Part III.” To start, create a new file called
quintus_audio.js
in the same directory as
blockbreak.html
and
add the code from
Listing 25-1
.
Listing 25-1:
The desktop quintus audio system
Quintus.Audio = function(Q) {
Q.audio = {
channels: [],
channelMax: Q.options.channelMax || 10,
active: {}
};
// Dummy methods
Q.play = function() {};
Q.audioSprites = function() {};
Q.enableSound = function() {
var hasTouch = !!('ontouchstart' in window);
if(!hasTouch) {
Q.audio.enableDesktopSound();
} else {
Q.audio.enableMobileSound();
}
return Q;
};
Q.audio.enableDesktopSound = function() {
for (var i=0;i<Q.audio.channelMax;i++) {
Q.audio.channels[i] = {};
Q.audio.channels[i]['channel'] = new Audio();
Q.audio.channels[i]['finished'] = -1;
}
Q.play = function(s,debounce) {
if(Q.audio.active[s]) return;
if(debounce) {
