HTML and CSS Reference
In-Depth Information
Iteration #3: Creating a Sound Pool
So, now we know we don't want to play an HTMLAudioElement object repeatedly or create
unlimited sound objects on the fly. However, what if we cap the number of audio objects we
create and put those objects in a pool so that we can use them over and over? This will save
us memory, and after the sounds are loaded, we shouldn't see any loading pause before they
are played, right?
We will implement a solution that uses HTMLAudioElement objects as general-purpose sound
objects. We will keep a pool of them and change the src attribute to whatever sound we want
to play. This appears to be an elegant solution that reuses as much as possible, in addition to
giving us a lot of flexibility as to which sounds we want to play.
In canvasApp() , we will create a new variable named MAX_SOUNDS . This will represent the
maximum number of sound objects we can create at any one time. We will also rename our
sounds array to soundPool to better describe its purpose:
var MAX_SOUNDS = 8 ;
var soundPool = new
new Array ();
Thebigchangehereisthe playSound() function.Itusesthesameparametersastheonefrom
iteration #2, but the functionality is very different:
function playSound ( sound , volume ) {
The first half of the function loops through the soundPool array to see whether any of the
HTMLAudioElement objects in the pool are available to play a sound. We determine this by
checking the ended property. Because only HTMLAudioElement objects that have previously
been used to play a sound are put into the pool, the ended property will be set to true when
the sound has finished playing. By replaying sounds that have finished, we remove the issue
of trying to reuse an HTMLAudioElement object to play a sound while it is already in use:
var soundFound = false
false ;
var soundIndex = 0 ;
var tempSound ;
iif ( soundPool . length > 0 ) {
while ( ! soundFound && soundIndex < soundPool . length ) {
var tSound = soundPool [ soundIndex ];
iif ( tSound . ended ) {
soundFound = true
true ;
Search WWH ::

Custom Search