HTML and CSS Reference
In-Depth Information
The audio Tag
New to HTML5 is the
audio
tag, much like video, audio becomes a first-class citizen in HTML5-compliant browsers
with many great features to take advantage of. Let's dig right into the new
audio
element in HTML5 by looking at some
of the code to get it to work (see Listing 7-11). Be sure to take notice of the source tags to satisfy the various browser
environments.
Listing 7-11.
HTML5 Audio Example
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<audio controls>
<source src="sampleAudioFile.mp3" type="audio/mpeg" />
<source src=" sampleAudioFile.ogg" type="audio/ogg" /> <!—Support Old FireFox -->
<object type="application/x-shockwave-flash" width="250" height="50">
<param name="movie" value="sampleAudioPlayer.swf" />
<param name="FlashVars" value="mp3=sampleAudioFile.mp3" />
<embed href="sampleAudioPlayer.swf" width="200" height="20" name="movie" type="application/x-
shockwave-flash" flashvars="sampleAudioFile.mp3"></embed>
</object>
</audio>
</html>
Let's take a look at the previous code. First you add the attribute
controls
, which as you've learned from the
video section allow the user to see the browser's native controls for the element. For audio, it would look something
like Figure
7-16
.
Figure 7-16.
The audio element with controls in HTML5
Keep in mind you have the same ability to skin the controls as you have for the
video
tags. In the example, I'm
sure you can agree it looks very similar to the video implementation, providing a Flash failback for older browsers as
well as including multiple audio files to support all browsers that need varying audio codecs and formats.
Audio Formats and Codecs
Let's talk a little bit about the different codecs you'll most likely come across when developing ads that leverage audio.
Audio is a bit less complicated than video in that there is much less to be concerned about as far as visual integrity
goes; however, audio still must be clear and compressed correctly for the Web. Most browsers that you'll target in your
next campaign will be fine supporting one of the formats outlined in Table
7-1
.
