Demonstration of HTML5
<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)
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 "/".
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.
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.
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.
- Dive Into HTML5 - Video from the online version of Mark Pilgrim's book, HTML5: Up and Running.
- VideoJS is an HTML5 Video Player that adds consistent set of player controls, backward compatibility for some older browsers, and a flash fallback for others.
- jPlayer is a jQuery HTML5 Audio & Video Player, and the newest version looks extremely promising although I haven't used it any projects personally. Be sure to grab a copy of the demos to assist you in correct setup.