Quick guide to implementing the HTML5 audio tag
Ernest Delgado outlines a straightforward approach for embedding audio in web pages while maintaining backward compatibility with older browsers.
Step 1: Wrap your Flash object with the audio tag
Browsers that don't recognize the audio tag will load the Flash content instead of failing silently.
Step 2: Add the source reference
Developers can include multiple source lines with different formats. If the browser can't play one specific format, it automatically falls back to the next one in the list.
Step 3: Add fallback to Flash
For maximum safety, you need to include a fallback to a Flash audio player in case the browser doesn't support any of the formats you specified. For example, Firefox 3.5 only supports the audio tag with Ogg format, but you might only have the mp3 file available.
To simplify the implementation, the guide uses the SWFObject library to insert the Flash player via JavaScript. To include the library, use the Google AJAX Libraries API by inserting two lines in your page header.
Step 4: Add the default controls to show the player
The default controls aren't customizable. Since these default controls will appear regardless of which format is supported, you need to manage their visibility using the conditional previously created in your code.
Alternatively, you can build a custom player using JavaScript and CSS if you need more control over the interface.
