HTML and CSS Reference
In-Depth Information
Setting Up the Audio Player Values
Inside the
canvasApp()
function, we need to create some values to help us place all the vari-
ous 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
var
bW
=
32
;
var
var
bH
=
32
;
Next we set the width of the playback area,
playBackW
, and the width of the volume back-
ground,
volBackW
. We also set the slider's width (
sliderW
) and height (
sliderH
):
var
var
playBackW
=
206
;
var
var
volBackW
=
50
;
var
var
sliderW
=
10
;
var
var
sliderH
=
32
;
Wealsoneedacouplevariablestorepresentthe
x
and
y
locationsonthecanvaswherewewill
starttobuildouraudiocontrols.Wewilldefinethoseas
controlStartX
and
controlStartY
:
var
var
controlStartX
=
25
;
var
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 background
(
volBackX
,
volBackY
), and the location of the loop/no loop toggle button (
loopX
,
loopY
):
var
var
playX
=
controlStartX
;
var
var
playY
=
controlStartY
;
var
var
playBackX
=
controlStartX
+
bW
var
var
playBackY
=
controlStartY
;
var
var
volBackX
=
controlStartX
+
bW
+
playBackW
;
var
var
volBackY
=
controlStartY
;
var
var
loopX
=
controlStartX
+
bW
+
playBackW
+
volBackW
var
var
loopY
=
controlStartY
;
We are going to use all of these values to help design and add functionality to our audio
controls. It might seem like overkill to create so many variables, but when trying to “roll
yourown”collisiondetectionanddrag-and-dropfunctionalityintothecanvas,havingvariable
names to manipulate instead of literals makes the job much easier.
