HTML5 Audio Demo

By B Lingafelter Apr 30, 2013 HTML5

Demonstration of HTML5 <audio> and <source> elements to serve audio to all current browsers without the use of browser plugins. Note: This solution will NOT work in older browsers that do not support HTML5, like Internet Explorer 7 and 8. If you need backward compatibility, consider jPlayer.

Sample Clip (0:11)

The Owl Named Orion (3:12)

The Markup

Step 1: Use the HTML5 doctype to serve the page as HTML5

Convert the page to HTML5. Most of the syntax rules still apply except for empty elements (like <img>, <br>, and <meta>); they no longer need to be closed with a "space" and "/".

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page title goes here</title>
</head>
<body>
  <!-- All markup elements go in the body as usual -->
</body>
</html>

Step 2: Add one <audio> element and a <source> element for each of the two required audio formats

The <audio> element shown below, includes several useful attributes: controls adds the native audio control elements, like play/pause, progress bar, and volume; preload allows the audio to begin downloading when the page loads; loop specifies the audio plays over and over.

The <source> element specifies the path and filename of the audio and its container type. Because the current browsers do not all play the same audio formats, you will need to convert your audio files to each of these audio formats: .mp3 and .ogg. Refer to Audio Formats below for more information.

You are not required to nest the <audio> element inside a <div>, but doing so increases your ability to style the audio element.

<div class="aplayer">
<audio id="audio1" controls>
  <source src="media/soundfile.mp3" type="audio/mp3">
  <source src="media/soundfile.ogg" type="audio/ogg">
</audio>
</div>

Audio Formats

Just as with video, not all browsers support the same audio codecs. A codec is the algorithm used to encode the audio stream and is read, or decoded, by an audio player when you listen to an audio file.

The .MP3 audio codec uses the audio/mp3 MIME type - It is the most popular but licensing costs are too pricey for smaller browser makers like Firefox and Opera.
The .OGG Vorbis audio codec uses the audio/ogg MIME type - It is a free, open standard comparable to MP3.

Encoding Tools

To encode and convert audio files to the required HTML5 audio formats (.mp3 and .ogg), you will need Audacity, a free, open-source tool.

Audacity (Win and Mac) http://audacity.sourceforge.net/ - Use to convert and encode a wide variety of audio file formats, like .WAV, .FLAC, .MP3, and .OGG. It does NOT rip from CD/DVD so you may still need to use iTunes, Winamp, or similar program for ripping.

Note: To convert an audio file to .mp3 format, you will also need to install the LAME MP3 Encoder. Due to .mp3 licensing issues, the LAME MP3 encoder can not be redistributed with Audacity, but read http://manual.audacityteam.org/help/manual/man/faq_installation_and_plug_ins.html#lame for download link and installation instructions.

ButlerCC Webhosting