HTML and CSS Reference
In-Depth Information
canvas.dimensions = {
width: (canvas.offsetWidth),
height: (canvas.offsetHeight)
};
}
This will now allow you to quickly retrieve the center coordinates and the width
and height of the canvas without storing them in global variables. You simple
use
canvas.center.x
, for example, to get the center x coordinate for the canvas.
Next you will need to assign callbacks for when the track updates its timer and
for when the track is paused.
app.playButton = function(id, track){
...
track.callbacks.didUpdateTime = function(time){
_self.draw();
};
track.callbacks.didPause = function(){
_self.draw();
}
}
As you can see, both callbacks simply call the
draw
method within the
playButton
class.
Next, you will need to create the playback control methods. This will be used to
play and stop the track via the play button. This also allows other objects or
function to start or stop the track through the play button.
app.playButton = function(id, track){
...
this.togglePlay = function(){
switch(track.getState()){
case track.state.STOPPED:
case track.state.PAUSED:
_self.play();
break;
case track.state.PLAYING:
_self.stop();
break;
}
};
