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
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 = {
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:
Search WWH ::

Custom Search