Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 39

interface elements or behind the scenes in JavaScript. Here is an example of what an <audio>
declaration looks like in your webpage:
<audio controls>
<source src="sample.mp3" type="audio/mp3"/>
<source src="sample.ogg" type="audio/ogg"/>
<p>Your browser does not support HTML5 audio.</p>
</audio>
This HTML provides the output in Internet Explorer shown in Figure 1-25.
FIGURE 1-25 The default audio controls in Internet Explorer
Figure 1-25 shows the output of the <audio> element when you opt to use the built-in
controls. From left to right, you get a pause/play button, the counter, a progress bar, the total
time in the audio, and a volume slider bar. Because no other screen space is required as in the
video samples, the <audio> element has no height or width properties available. If you don't
like the built-in audio control bar, you can choose not to include it in your declaration and
instead create a custom control bar that suits your needs.
The <audio> and <video> elements are very similar. The key point regarding these ele-
ments is that they provide a standardized way to represent media in HTML pages to simplify
reading the HTML code and know exactly what the page is supposed to be doing.
Now that you know how to use audio and video in your webpages, you can turn your
attention to the use of graphics.
Implementing graphics with HTML5 <canvas> and SVG
HTML5 provides a new mechanism to work with graphics in your webpages. The HTML5
specification introduces the <canvas> webpage element, which provides a blank canvas on
which you can draw dynamically. You can draw lines, text, and images on the canvas and
manipulate them with JavaScript.
Adding a canvas to your page is as simple as declaring one in the HTML. The <canvas>
element is similar to the <div> element. However, it's a container for graphics as opposed to
text-based elements. Here is the markup for a <canvas> element:
<canvas id="drawingSurface" width="600" height="400">
Your browser does not support HTML5.
</canvas>
The HTML is very straightforward. You simply need to define a <canvas> and specify a
size. Also, if the user's browser doesn't support the <canvas> element, you can place fallback
text inside the <canvas> element to be displayed in its place. When you run this HTML in the
browser, you should notice absolutely nothing! This is because—just like with a <div> ele-
ment or any other container—the <canvas> element has no default visibility; in other words,