HTML5 Canvas, 2nd Edition

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 background (volBackX, volBackY), and the location of the loop/no loop toggle button (loopX, loopY):

var playX = controlStartX;
var playY = controlStartY;
var playBackX = controlStartX+bW
var playBackY = controlStartY;
var volBackX = controlStartX+bW+playBackW;
var volBackY = controlStartY;
var loopX = controlStartX+bW+playBackW+volBackW
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 your ...