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
Array
();
The big change here is the playSound()
function. It uses the same
parameters as the one from 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 ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.