Mouse Events
Because 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 that we can start
dragging it:
theCanvas
.
addEventListener
(
"mousedown"
,
eventMouseDown
,
false
);
Finally, we listen for the mousemove
event so that 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
);
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.