HTML and CSS Reference
In-Depth Information
Figure 7-4.
iTunes preview playback control
To begin with, create the two objects in your
canvas.js
file, as shown in the
following code snippet:
var app = app || {};
app.playButton = function(id, track){
}
app.track = function(length){
}
As you can see, the constructor for the
playButton
takes an
id
, which will be the
ID of the Canvas element, and a
track
, which will be an instance of the
app.track
class. The
track
constructor simply takes the length of the track in
seconds.
As the
track
needs to be instantiated first, you will begin by creating the code
for the
track
class. To begin with, create a new property within the
track
class
called
this.state
, as follows:
app.track = function(length){
this.state = {
STOPPED: 0,
PLAYING: 1,
PAUSED: 2
};
}
The
state
property contains variables that can be used to determine the current
state of the application. The alternative to doing this is to store the current state
as a string (i.e., playing, paused, or stopped). This can be problematic as you
add more states or change the state names in your application. By doing this, to
change the application's state it's as simple as using
state =
this.state.STOPPED
. This helps, too, because as you type
this.state.
the code
completion will appear to show you the possible states, which is better and
more efficient than having to dig through your code to find out what the
available states are.
Next, you define a few variables within the scope of the
track
class, as shown in
the following code snippet:
