HTML5 Audio Tag Tutorial

Two SpeakersHTML5 is here and so is the long awaited Audio Tag. They said it would take a decade or more, but it’s quickly being adopted by popular browsers like Firefox, Chrome and Safari.

Although it’s not a W3C recommendation yet (at the time of this writing), there is enough support to start experimenting and developing websites and applications with the new elements. I’ll cover the HTML5 Audio Tag specifically in this article.

The plain Audio Tag looks like this: <audio src=”” controls=”controls”>You Need HTML5 in your browser</audio>

The value of src can be an OGG file. The content between the audio tags can be a message for those who use browsers that lack HTML5 Audio Tag support.

That’s it, nothing fancy. The tag can also be styled with CSS.

How to create an OGG file

There are audio recording software that can output in the OGG format. I have extensive audio recording and editing experience but I have not tested any software that supports OGG. I will be doing this soon and report my findings in an update to this article.

I did the simplest thing when testing the audio tag. I used a free software called MP3 2 Ogg Lab and converted an MP3 file to OGG.

Implementing HTML5 Audio Tag

With an OGG file ready, I created a quick test HTML file on my computer and added the tag.

Example: <audio src=”mytest.ogg” controls=”controls”>Browser lacks support for Audio Tag</audio>

When I loaded the file from my desktop, it played fine in FireFox, Chrome, and Opera. But not in Safari (this is on a PC).

When loaded from my web server it played in Chrome and Opera. It did not play in FireFox or Safari.

Of course IE does not support HTML5 Audio tag, and my tests confirmed this.

I’m not sure why FireFox plays the file from the desktop but not my server. It could be a Codec issue. Same with Safari. I will have to test other conversion tools, and OGGs created from different sources to pinpoint the cause of this issue.

Some Live Audio Tag Demos

There are a few demos currently available for the audio tag along with other tags. Here they are:

Let me know if you find this useful. If you have tested the HTML5 Audio Tag and would like to share your experience please tell us about it in the comments.

2 Replies to “HTML5 Audio Tag Tutorial”

  1. Safari doesn’t play it because it doesn’t support ogg/vorbis. It supports mp4/aac.

    Firefox didn’t play it because it was probably served as application/octet-stream. You should serve it as audio/ogg.

Comments are closed.