• Choose a category
• All
• Classic-Fiction

By Root 6384 0

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 may 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 constant 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:

const MAX_SOUNDS = 6;

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

var explodeSound ;

var explodeSound2 ;

var explodeSound3 ;

…and three for the shoot sound:

var shootSound;

var shootSound2;

var shootSound3;

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

explodeSound = document.createElement("audio");

document.body.appendChild(explodeSound);

audioType = supportedAudioFormat(explodeSound);

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

explodeSound.addEventListener("canplaythrough",itemLoaded,false);

explodeSound2 = document.createElement("audio");

document.body.appendChild(explodeSound2);

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

explodeSound2.addEventListener("canplaythrough",itemLoaded,false);

explodeSound3 = document.createElement("audio");

document.body.appendChild(explodeSound3);

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

explodeSound3.addEventListener("canplaythrough",itemLoaded,false);

shootSound = document.createElement("audio");

document.body.appendChild(shootSound);

shootSound.setAttribute("src", "shoot1." + audioType);

shootSound.addEventListener("canplaythrough",itemLoaded,false);

shootSound2 = document.createElement("audio");

document.body.appendChild(shootSound2);

shootSound2.setAttribute("src", "shoot1." + audioType);

shootSound2.addEventListener("canplaythrough",itemLoaded,false);

shootSound3 = document.createElement("audio");

document.body.appendChild(shootSound3);

shootSound3.setAttribute("src", "shoot1." + audioType);

shootSound3.addEventListener("canplaythrough",itemLoaded,false);

In the itemLoaded() function, we remove the event listeners for all six loaded sounds:

shootSound.removeEventListener("canplaythrough",itemLoaded, false);

shootSound2.removeEventListener("canplaythrough",itemLoaded, false);

shootSound3.removeEventListener("canplaythrough",itemLoaded, false);

explodeSound.removeEventListener("canplaythrough",itemLoaded,false);

explodeSound2.removeEventListener("canplaythrough",itemLoaded,false);

explodeSound3.removeEventListener("canplaythrough",itemLoaded,false);

Then, we push each sound into our soundPool array. However, this time, we push them as dynamic objects so we can set the following properties, which don’t exist in the HTMLAudioElement object:

name

The name of the sound file to play (again, without the extension).

element

The reference to the HTMLAudioElement object.

played

A Boolean that tells us whether this sound has played once or not. We need this property because we are putting all of these sound objects into our array, but they have not been played yet. That means their ended property has not yet been set to true. The played property tells us whether the sound is ready to play—that is, it has not been played yet. We will set this to true after we play the sound once:

soundPool.push({name:"explode1", element:explodeSound, played:false});

soundPool.push({name:"explode1", element:explodeSound2, played:false});

soundPool.push({name:"explode1", element:explodeSound3, played:false});

soundPool.push({name:"shoot1", element:shootSound, played:false});

soundPool.push({name:"shoot1", element:shootSound2, played:false});

soundPool.push({name:"shoot1", element:shootSound3, played:false});

Now we need to make a change in our resetApp() function. This change is to support