HTML and CSS Reference
In-Depth Information will check to see whether the track is playing by checking the current
state. If the track is not playing, then it will create a new interval timer.
window.setInterval takes two parameters: the callback method and the interval
time in milliseconds. If you wish to assign a callback that takes a parameter from
the function that set the initial interval, you could use the following:
var globalParam = 'foo';
window.setInterval(function(){, globalParam);
}, intervaltime);
Remember that globalParam must be declared with var in order for it to exist
within the closure.
Finally, you define the default callback functions.
app.track = function(length){
this.callbacks = {
didUpdateTime: function(time){},
didStartPlaying: function(){},
didPause: function(){},
didStop: function(){}
As you can see, these are empty functions. This allows you to call the callback
functions even if they haven't been assigned. There are four callback functions:
this.callbacks.didUpdateTime , this.callbacks.didStartPlaying ,
this.callbacks.didPause , and this.callbacks.didStop .
Now it's time to start creating the play button and digging into Canvas! Before
you begin, it's important to understand how Canvas really works. In order to
draw on the canvas, you need to get its context. If you are not familiar with what
a context is, it is like a hidden space where you can draw. The context will be
presented to the user after you have finished drawing onto it. There is currently
only one context in the Canvas API, and all shapes are drawn onto it. In an ideal
world, you would have several contexts, draw individual components onto them,
and merge each context onto one single context. For now, this is not possible,
and will be explained further into this chapter.
The Canvas context works on a coordinate-based system with 0,0 starting at
the top left, as shown in Figure 7-5.
Search WWH ::

Custom Search