HTML and CSS Reference
In-Depth Information
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 sounds nearly every time they are needed. This solution must also work
both locally and when 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 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);