HTML and CSS Reference
In-Depth Information
Figure 7-1. The very basic HTML5 <audio> tag
Audio Formats
Similar to video formats, which we learned about in
Chapter 6
, not every web browser
supports every audio format. In fact, audio support appears to be in worse shape than
video. As you will soon discover in this chapter, audio is one place where HTML5 needs
some serious work. However, we will show you some strategies and workarounds for
making audio easier to use in your applications.
Supported Formats
Here is a quick chart to show you which audio formats are supported by which brows-
ers. We are not going to use version numbers here because we assume the latest version
of each product:
Platform
.ogg
.mp3
.wav
Chrome
X
X
Firefox
X
X
Safari
X
X
Opera
X
X
Internet Explorer 9
X
X
The situation is much like that of the
<video>
tag. To support
<audio>
we will need to
use multiple separate formats for each piece of audio we want to play. To be on the
safe side, we will use three formats:
.mp3
,
.ogg
, and
.wav
.
Audacity
Fortunately, there is a great free audio tool available that will help you convert audio
into any format. In our case, we need to convert to
.mp3
,
.ogg
, and
.wav
.
Audacity (
http://audacity.sourceforge.net/
) is an open source, cross-platform project
designed to bring sophisticated audio editing to the desktop. The current version works
on Mac, Windows, and Linux.
Figure 7-2
shows a sample screen from Audacity. When you load a sound into Audacity,
it displays the waveform of the sound. You can manipulate the sound in many ways,
including trimming, splitting, and duplicating, and then add effects such as fade, echo,
