Understanding and Using Audio Tags
WORK WITH THE AUDIO ELEMENT
GET READY. To work with the HTML5 audio element, perform the following steps:
1. Locate an audio clip.
2. In your editing tool, create an HTML file with the following markup. Substitute the appropriate file name for your audio clip.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio Test</title>
</head>
<body>
<audio src="sample.mp3" controls="controls">
</audio>
</body>
</html>
3. Save your file as L2-audio.html and view it in a browser. You should see something similar to Figure 2-19. Because we didn’t include the autoplay attribute in this example, you need to click the Play button to start the audio clip.
Figure 2-19
HTML5 default audio controls in a Web browser
4. If the audio controls don’t appear, go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-audio.html and click Check to have the service check it. Fix any errors reported by the checker that relate to missing tags or typos, if any.
5. Save the file again and open it in a Web browser. Play the audio clip.
6. Close any open files, including the editing tool and Web browser.
✚
MORE INFORMATIONFor more information on incorporating multimedia into HTML5 Web pages, and the audio and video elements in particular, go to http://msdn.microsoft.com/en-us/library/ie/hh771805(v=vs.85).aspx.
S K I L L S U M M A R Y
INTHIS LESSONYOULEARNED:
• Hypertext Markup Language (HTML) uses markup to describe content for display on a Web page.
• An element is the combination of tags and the content they enclose. You may need to use special characters on a Web page, which requires character encoding.
• Every Web page requires the doctype declaration at the top of the page.
• HTML5 uses most of the same elements and attributes specified in HTML 4, and has intro-duced some new tags, modified the preferred usage of others, and no longer supports certain elements. New text-related elements include command, mark, time, meter, and progress. A few of the deprecated elements are basefont, center, font, and strike.
• Use the img element to display linked images in a Web page. The images can be located with the Web pages HTML files, usually in an images subfolder, or on a different server or Web site.
• The figure and figure caption elements are new to HTML5 and give you more con-trol or the type of image you are displaying and the ability to include captions.
• The canvas element is used for drawing, rendering, and manipulating images and graph-ics dynamically in HTML5.
• Scalable Vector Graphics (SVG) enables you to create scalable objects that resize to best fit the screen on which they’re viewed, whether a PC screen or a smartphone.
• HTML5 introduces the audio and video elements, which do away with the need for plug-ins or media players to listen to music or watch videos via a Web browser.
Fill in the Blank
Complete the following sentences by writing the correct word or words in the blanks provided.
1. An HTML tag that doesn’t require an end tag is called a(n) tag.
2. A(n) works with an element to describe data in enough detail for rendering.
3. The is a declaration that is found at the very top of almost every Web page.
4. A element or attribute has been removed from the list of available HTML elements according to the W3C.
■
Knowledge Assessment
5. A image is made up of pixels, whereas a image is made up of lines and curves based on mathematical expressions.
6. New to HTML5, the element specifies the type of figure you’re add-ing, such as an image, diagram, photo, and so on.
7. The element adds a caption to an image on a Web page, and you can display the caption before or after the image.
8. Using the element, the Web page becomes a drawing pad, and you use JavaScript commands to draw pixel-based shapes on a canvas that include color, gradi-ents, and pattern fills.
9. is a language for describing 2D graphics in Extensible Markup Language (XML).
10. The HTML5 element and elements enable you to
provide multimedia from a Web browser without the need for plug-ins.
Multiple Choice
Circle the letter that corresponds to the best answer.
1. Which of the following tags are required on every Web page? (Choose all that apply.) a. <html>
b. <head>
c. <title>
d. <body>
2. Which of the following is the syntax for creating a hyperlink in HTML?
a. <link href="http://www.example.com">link</a>
b. <a href="http://www.example.com"> link text</a>
c. <link>http://www.example.com</link >
d. <http://www.example.com>
3. Which HTML5 element defines a command button that users click to invoke a command?
a. <objectbut>
b. <combutton>
c. <command>
d. <cbutton>
4. Which HTML5 element enables you to highlight blocks of text in an HTML document?
a. <mark>
b. <highlight>
c. <emphasis>
d. <yellow>
5. Which of the following tags are deprecated in HTML5? (Choose all that apply.) a. <big>
b. <center>
c. <font>
d. <time>
6. Which tag is used with the <figure> tag to display an image?
a. <img>
b. <src>
c. <fig>
d. <a>
7. Both canvas and SVG require which of the following?
a. Microsoft Silverlight
b. An external drawing program, such as Microsoft Paint c. A large amount of storage space or bandwidth d. JavaScript
8. When deciding whether to use canvas or SVG, which of the following considerations are true?
a. If the drawing is relatively small, use SVG.
b. Generally, use canvas for small screens and SVG for larger screens.
c. If the drawing requires a large number of objects, use SVG.
d. If you must create highly detailed vector documents that must scale well, go with canvas.
9. Which of the following is the general format of the video element?
a. <movie src="file.mp4" width="X" height="Y">
b. <movie href="file.mp4" width="X" height="Y">
c. <video src="file.mp4" width="X" height="Y">
d. <video href="file.mp4" width="X" height="Y">
10. Which of the following is the general format of the audio element?
a. <audio src="sample.mp3" controls="controls">
b. <audio href="sample.mp3" controls>
c. <sound src="sample.mp3" controls>
d. <sound href="sample.mp3" controls="controls">
True / False
Circle T if the statement is true or F if the statement is false.
T F 1. The canvas element requires JavaScript to create shapes.
T F 2. Creating an SVG object in HTML5 does not require JavaScript.
T F 3. The audio element can provide playback controls with a single attribute.
T F 4. Deprecated elements cannot render in an HTML5-supported browser.
T F 5. The most popular format for audio fi les is MP4.
■