Working with Audio - HTML5 Canvas - page 617

Iteration #4: Reusing Preloaded Sounds

Even though the code in iteration #3 was pretty clean, it simply did not work for us. Instead,
we need to compromise and implement a solution that is less elegant but that works to play
soundsnearlyeverytimetheyareneeded.Thissolutionmustalsoworkbothlocallyandwhen
loaded from a website.
For this final iteration, we are going to use a sound pool just like in iteration #3, but it will
operate in a different way. We will not reuse sound objects for different sound files. Instead,
we will load all our sounds up front and simply play a sound object that is currently not being
used. In effect, we will “prime the pump,” creating three sound objects for each of our two
sounds, for a total of six sound objects when we start the application. While this might not
seem like the perfect solution, it appears to work fairly well in all browsers and plays sounds
in the most effective way.

In canvasApp() , we set our MAX_SOUNDS variables to 6 . We could make it higher, but for this
example, we will limit it to the number of sounds we will create and preload:

var var MAX_SOUNDS = 6 ;

We then create six variables to hold our HTMLAudioElement objects—three for the explode
sound:

var var explodeSound ;

var var explodeSound2 ;

var

var explodeSound3 ;

And three for the shoot sound:

var var shootSound ;

var var shootSound2 ;

var var shootSound3 ;

In the initApp() function, we preload all of these sound objects. Yes, we load the same ob-
ject multiple times:

explodeSound = document . createElement ( "audio" );
document . body . appendChild ( explodeSound );
audioType = supportedAudioFormat ( explodeSound );
explodeSound . addEventListener ( "canplaythrough" , itemLoaded , false false );

explodeSound . setAttribute ( "src" , "explode1." + audioType );

explodeSound2 = document . createElement ( "audio" );
document . body . appendChild ( explodeSound2 );
explodeSound2 . addEventListener ( "canplaythrough" , itemLoaded , false false );