While the HTML5 video element gets the lion’s share of attention because of its potential to eliminate the need for Flash on popular sites like YouTube, the HTML5 audio element is equally useful. Like <video>, <audio> allows you to embed files in your page without the need for Flash or other plugin-based players.

The IEBlog recently posted a nice overview of how to use the <audio> element in your pages. Covering everything from the basics of embedding a file to more advanced topics like preloading, looping and syncing audio files; the post makes a great introduction to the world of the HTML5 <audio> tag.

As you would expect, the specifics of the tutorial target MP3 files, the primary audio codec supported in Microsoft’s IE 9 (and the coming IE 10). Firefox and others do not support MP3 out of the box, so check out this post in the MSDN library for more info on embedding multiple audio file formats in a single tag. Mark Pilgrim’s Dive Into HTML5 also has a great overview of embedding multiple files (Pilgrim’s tutorial is primarily concerned with video, but he covers audio in passing).

Also note that not everything list in the IEBlog post works in every browser, for example the autoplay value on the audio tag does not seem to work on Mobile Safari (some might consider that a feature). There’s also no mention of a fallback for older browsers that don’t support <audio> at all. Still, it’s nice to see Microsoft encouraging developers to embrace the new HTML5 audio tag.

Once you understand the basics of how the audio tag works, it’s well worth checking out pre-built solutions like MediaElement.js, which make it easy to target every web browser, including those that don’t understand the <audio> tag.

See Also:

• Developer Gives Internet Explorer the Gift of HTML5 Video
• Pick the Perfect HTML5 Video Player for Your Site
• Awesome Guitar Tab Mashup Showcases Audio Data API
• New HTML5 Tools Make Your Browser Sing and Dance