HTML and CSS Reference
In-Depth Information
Table 7-1. HTML5 Audio Formats and Browser Support
Browser
Version
Codec
Internet Explorer
9+
MP3, AAC
Chrome
9+
OGG, MP3, WAV
Firefox
4+
OGG, WAV
Safari
5+
MP3, AAC, WAV
Opera
10+
OGG, WAV
Android
2.3+
Device dependent
Mobile Safari
3+
MP3, AAC
BlackBerry
6+
MP3, AAC
As you can see from Table 7-1 , audio support is pretty fragmented, so be sure to include multiple audio sources
if you intend to target multiple browsers for your campaign. You may also want to stream audio into your ad, and you
would need to lean on one of the adaptive streaming techniques discussed earlier. The only difference is instead of
using an MP4 or another video file, you would include your audio file and adjust the bitrate settings accordingly. The
last thing to note is that it's important to provide a failback for browsers that don't support the audio tag, so leverage
plug-ins like Flash or Silverlight to handle this.
Note
i'll discuss more emerging features with htML5 audio including the Web audio api in Chapter 12.
Audio Tools
There are many free services on the Web if you need to convert your audio files into the previous formats for
multibrowser support. For example, if you intend to convert to all the previous audio flavors (OGG, WAV, AAC, and MP3),
I suggest visiting http://audio.online-convert.com where you can convert to those formats and many others.
Audio JavaScript API
As you may have guessed, you can use JavaScript much like in video to control the audio playback. This is
exceptionally helpful if you're customizing your own controls for the browser's internal player. Since you'll likely be
re-creating custom buttons for play/pause and audio on/off, you'll need to leverage the JavaScript API to add events
and check formats. Listing 7-12 shows the previous example, where instead of using the default controls by the
browser, I'll show how to build them using JavaScript.
Listing 7-12. HTML5 Audio JavaScript Example
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onClick="handleEvent(this);">Play Audio</button>
 
 
Search WWH ::




Custom Search