HTML and CSS Reference
In-Depth Information
</style>
</head>
<body>
<canvas id="play" width="100" height="100"></canvas>
<script src="js/canvas.js"></script>
</body>
</html>
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
(playing/paused/stopped)
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
symbol
Representing the track's playback progress by moving a play
head
Inspired by the iTunes playback controls, as shown in Figure 7-4, you will create
something similar.
