HTML and CSS Reference
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
Listing 7-11. HTML5 Audio Example
<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-
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 .