Working with Audio - HTML5 Canvas - page 340

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 may seem like overkill to create so many variables, but when trying to “roll
your own” collision detection and drag-and-drop functionality into the canvas, having
variable names to manipulate instead of literals makes the job much easier.
Mouse Events
Since we are going to create our own functions for interactivity between the mouse and
our custom canvas audio controls, we need to add some event handlers for certain
common mouse events.
First, we need to create a couple variables— mouseX and mouseY —that will hold the
current x and y locations of the mouse pointer:
var mouseX;
var mouseY;
Next, we need to create the event handlers. First, we listen for the mouseup event. This
event fires when a user stops pressing the mouse button. We will listen for this event
when we are trying to determine whether we should stop dragging the volume slider:
theCanvas.addEventListener("mouseup",eventMouseUp, false);
We also need to listen for the mousedown event to determine whether the play/pause
button was pressed, the loop on/off toggle button was pressed, and/or the volume slider
was clicked so we can start dragging it:
theCanvas.addEventListener("mousedown",eventMouseDown, false);
Finally, we listen for mousemove so we can figure out the current x and y locations of the
mouse pointer. We use this value to determine whether buttons have been pressed, as
well as whether the volume slider has been clicked and/or dragged:
theCanvas.addEventListener("mousemove",eventMouseMove, false);
Sliding Play Indicator
The sliding play indicator is the simplest control we are going to draw onto the canvas.
It is not interactive—it just gives the user a visual indication of how much of the audio
clip is left to play.
First of all, in canvasApp() we need to make sure that we call the drawScreen() function
on an interval, so our updated controls will be displayed:
setInterval(drawScreen, 33);