HTML5 Canvas [124]
Figure 7-5 shows the audiocontrols.png image that we created. It holds all the images we will use for the audio player. The top row consists of:
The play state of the play/pause button
The background of the play slider
The moving slider we will use for the play and volume sliders
The second row consists of:
The pause state of the play/pause button
The background of the volume slider
The “off” state of the loop button
The “on” state of the loop button
Figure 7-5. audiocontrols.png
Loading the Button Assets
Since 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 then 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 functions in the applications. First, outside of all the JavaScript functions, we will create three new variables—loadCount, itemsToLoad, and buttonSheet:
loadCount
This variable will be used as a counter. When an asset has preloaded we will increment this value.
itemsToLoad
This is a numeric value that represents the number of assets we need to load before we can execute the application in the HTML page.
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 loadCount = 0;
var itemsToLoad = 2;
var buttonSheet;
var audioElement;
NOTE
To make these variables scope only to the Canvas app and not globally to all of JavaScript, you can encapsulate this code in a function(). The final version of the code in Example 7-6 shows that process.
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);
To load and use the audiocontrols.png image, we first create a new Image() object and place a 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 onload event handler of the Image object to itemLoaded, which is the same event handler we used for the audio file:
buttonSheet = 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 whether it is equal to or has surpassed the number of items we want to preload, which is represented by the itemsToLoad variable. If so, we call the canvasApp() function to start our application:
function itemLoaded(event) {
loadCount++;
if (loadCount >= itemsToLoad) {
canvasApp();
}
}
Setting Up the Audio Player Values
Inside the canvasApp() function we need to create some values to help us place all the various buttons and sliders on the canvas.
First, bH represents the height of all the controls; bW represents the width of a standard button (play/pause, loop/not loop):
var bW = 32;
var bH = 32;
Next, we set the width of the playback area, playBackW, and the width of the volume background, volBackW. We also set the slider’s width (sliderW) and height (sliderH):
var playBackW = 206;
var