HTML and CSS Reference
So far, I have referred to audio content in a rather generic way, without mentioning specific
audio formats such as MP3 or WAV. This is a major problem with HTML5-compliant browsers:
Not all browsers support the same set of audio formats by default (without resorting to external
The problem of codecs
An audio file is a sequence of bytes that codec software decodes for playing. An audio file, therefore,
can be encoded in a variety of formats, each requiring an ad hoc codec—MP3, WAV, OGG, and
more. More often than not, a codec is a piece of software that implements patented algorithms, so
embedding a codec directly in the browser may pose copyright issues.
The current HTML5 standard doesn't make an official ruling about codecs, so deciding on the
format to support will remain up to the browser vendors for now.
From a developer's perspective, this is not great news. Different browsers support different audio
formats, leaving developers with the problem of working out the most effective way to play audio
from the same page on different browsers.
The simplest way of approaching the problem of multiple codecs is to provide multiple files so the
browser can choose the most appropriate for its capabilities. In other words, instead of linking the
<audio> element to just one audio file and codec, you link it to multiple sources. You no longer use
the src attribute; instead, you resort to a set of <source> elements inside the <audio> element. Here's
an example of playing an audio file using <source> elements:
<audio controls autoplay>
<source src="hello.ogg" type="audio/ogg" />
<source src="hello.mp3" type="audio/mp3" />
<p>Your browser does not support the audio element.</p>
The <source> elements link to different audio files. The browser will use the first format it knows
how to support. While simple to implement, this approach is not free of issues—in the sense that
it requires you to have each audio file available converted into multiple formats and stored on the
server in multiple copies.
A basic guideline is that the OGG format is not subject to software patents. OGG will work in
Firefox, Opera, and Chrome. To target Safari and Internet Explorer, you need to use MP3 encoding
The video element
To embed video content into HTML documents, you use the <video> element. The syntax is just as
trivial as what you have seen for the <audio> element: