Working with Audio - HTML5 Canvas - page 578

Mouse Events

Becausewearegoingtocreateourownfunctionsforinteractivity betweenthemouseandour
customcanvasaudiocontrols,weneedtoaddsomeeventhandlersforcertaincommonmouse
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 var mouseX ;

var

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 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 false );

Finally, we listen for the mousemove event so that we can figure out the current x and y loca-
tionsofthemousepointer.Weusethisvaluetodetermine whetherbuttonshavebeenpressed,
as well as whether the volume slider has been clicked and/or dragged:

theCanvas . addEventListener ( "mousemove" , eventMouseMove , false false );