Working with Audio - HTML5 Canvas - page 575

Loading the Button Assets

Because we are going to load in both an audio file and an image file for this application, we
need to employ a strategy that will allow us to preload two assets instead of just one. This
process is much like the one we employed in Chapter 6 when we created controls for a video.
Previously in this chapter, we used a function named audioLoaded() to make sure the audio
was loaded before we started use it. However, that strategy will not work when we have two
assets to load. We could create two separate event listeners, but what if we need to load 3,
4, or 10 assets? What we need is a simple way to ensure that we can preload any number of
assets before our application executes.
We will start this process by creating some variables that are global in scope to all the func-
tionsintheapplications.First,outsideofalltheJavaScriptfunctions,wewillcreatethreenew
variables— loadCount , itemsToLoad , and buttonSheet :

loadCount loadCount

This variable will be used as a counter. When an asset has preloaded we will increment
this value.

itemsToLoad itemsToLoad

Thisisanumericvaluethatrepresentsthenumberofassetsweneedtoloadbeforewecan
execute the application in the HTML page.

buttonSheet buttonSheet

This variable will hold a reference to the audiocontrols.png image shown in Figure 7-5 .
We will use it to create our audio controls.
Here is the code with values included:

var var loadCount = 0 ;

var var itemsToLoad = 2 ;

var

var buttonSheet ;
var var audioElement ;

NOTE
To make these variables scope only to the Canvas app and not globally to all of JavaScript, you can
encapsulate thiscodeina function() .Thefinalversionofthecodein Example A-1 showsthatpro-
cess.