HTML and CSS Reference
In-Depth Information
<canvas id="play" width="100" height="100"></canvas>
<script src="js/canvas.js"></script>
This will create a Canvas element with an id of play that is 100 pixels wide and
100 pixels high. You should never attempt to size a Canvas element using CSS,
as it will not work as expected. This HTML will also link to the canvas.js file.
Open the canvas.js file, which will be used to control your canvas. You will use
object-oriented JavaScript to create and control your play button.
In this example, you will require two objects: a track object (which will simulate
an actual audio track) and a playButton object (which will control displaying
track progress and playing/pausing the track). The track object should be
responsible for the following:
Keeping track of the total length of the track
Keeping the current state of the track
Keeping the current time of the track if it is playing
Playing, pausing, and stopping the track
The playButton object for this example will be responsible for the following:
Drawing the play button
Showing the playback progress
Showing the track playback state
Representing the track's state by showing the play or stop
Representing the track's playback progress by moving a play
Inspired by the iTunes playback controls, as shown in Figure 7-4, you will create
something similar.
Search WWH ::

Custom Search