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
var
MAX_SOUNDS
=
8
;
var
var
soundPool
=
new
new
Array
();
Thebigchangehereisthe
playSound()
function.Itusesthesameparametersastheonefrom
iteration #2, but the functionality is very different:
function
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
var
soundFound
=
false
false
;
var
var
soundIndex
=
0
;
var
var
tempSound
;
iif
(
soundPool
.
length
>
0
) {
while
while
(
!
soundFound
&&
soundIndex
<
soundPool
.
length
) {
var
var
tSound
=
soundPool
[
soundIndex
];
iif
(
tSound
.
ended
) {
soundFound
=
true
true
;