HTML and CSS Reference
In-Depth Information
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 volBackW = 50;
var sliderW = 10;
var sliderH = 32;
We also need a couple variables to represent the
x
and
y
locations on the canvas where
we will start to build our audio controls. We will define those as
controlStartX
and
controlStartY
:
var controlStartX = 25;
var controlStartY = 200;
Finally, we need to specify the
x
and
y
locations for the play/pause button (
playX
,
playY
), the playing slider background
(playBackX
,
playBackY
), the volume slider back-
ground (
volBackX
,
volBackY
), and the location of the loop/no loop toggle button
(
loopX
,
loopY
):
var playX = controlStartX;
var playY = controlStartY;
var playBackX = controlStartX+bW
