Working with Audio - HTML5 Canvas - page 576

Also, like in the video player application from the last chapter ( CH6EX11.html ), we need to
create some variables to set a wait time between button presses:

var var buttonWait = 5 ;

var var timeWaited = buttonWait ;

Inside the eventWindowLoaded() function, we now need to set the event handlers for the
assets to load. For the audioElement , we will change the handler from audioLoaded to
itemLoaded :

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

Toloadandusethe audiocontrols.png image,wefirstcreateanew Image() objectandplacea
reference to it into the buttonSheet variable. Next, we set the src attribute of the new Image
object to the image file we want to load—in this case, audiocontrols.png . We then set the on-
load event handler of the Image object to itemLoaded , which is the same event handler we
used for the audio file:

buttonSheet = new new Image ();

buttonSheet . onload = itemLoaded ;
buttonSheet . src = "audiocontrols.png" ;

Now we need to create the itemLoaded() event handler. This function is quite simple. Every
time it is called, we increment the loadCount variable. We then test loadCount to see wheth-
eritisequaltoorhassurpassedthenumberofitems wewanttopreload,whichisrepresented
bythe itemsToLoad variable.Ifso,wecallthe canvasApp() functiontostartourapplication:

function function itemLoaded ( event ) {

loadCount ++ ;
iif ( loadCount >= itemsToLoad ) {
canvasApp ();

}

}