SOUND - HTML5 - page 197

<! DOCTYPE HTML >
< html >
< style type = ”text/css” >
/* 694703,A83110,E89F06,F5D895,B3CF83 */
body {
background - color : #B3CF83;
font - family : Verdana , Geneva , sans - serif ;
color : #694703;
}
h1 {
font - family : Braggadocio , “Arial Black” ;
color : #A83110;
}
</ style >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Controls </ title >
</ head >
< body >
< article >
< header >
< h1 > Jazz Tonight </ h1 >
</ header >
< section >
< p > Click the triangle to start the show : </ p >
< audio src = ”mists.ogg” controls ></ audio >
< p > The || two pipes symbol stops all of this . </ p >
</ section >
</ article >
</ body >
</ html >

201

When you run this program, be sure to use a browser compatible with the audio i le. (Use
a .wav i le if the .ogg i le type doesn't work with your browser.) Depending on the kind of
browser you use, you'll see dif erent player controls. Figure 10-1 shows how the dif erent
browsers look. (h e Google Chrome browser is shown with the sound actually playing.)

About the only common feature of the audio control bar is the triangle start button on the far
let , and the sound on/of toggle on the far right. h e stop/pause button is similar as well, but
the graphics of each is unique. (h e dif erent control bar images may give designers i ts as
they try to design a page with audio to be fully compatible with all browsers.)

Providing some kind of control for users is essential. h e Chrome browser provides a nice big
bar so that the user can clearly see where she is relative to the beginning and end of the audio.
For instructional audios, the scrubber bar (the vertical bar you can see in the Chrome browser
in Figure 10-1) is important so that the student can drag the scrubber bar to review those
portions of a lesson that are dii cult to understand.