HTML5 Primer: How To Use the Audio Tag

By Scott Clark

https://www.htmlgoodies.com/primers/html/article.php/3920991/HTML5-Primer-How-To-Use-the-Audio-Tag.htm (Back to article)

In our series on HTML5, we've discussed geolocation, link relations, form and keyboard events, media events, mouse events, global attributes and multimedia. This week we're going to expand upon our discussion on multimedia and delve further into HTML5's <audio> tag.

The <audio> tag is new to HTML, like the <video> tag, and allows developers to embed music on their websites (and unlike earlier attempts to add audio to a website, it isn't limited to old-fashioned midi music). That said, it does have limitations on the types of files that can be used. Currently any recent browser that is based on Webkit, such as Chrome and Safari, supports the use of regular .mp3 files. Others, such as Firefox, only support the .ogg format.

The good news is that you can either convert your files from .mp3 to .ogg (one audio conversion tool, media.io, can be used online) or just supply two versions of your audio file, one in each format. When Safari, for instance, comes across the <audio> tag, it will ignore the .mp3 file and move directly to the .ogg file.

So How Is the <audio> Tag Used on the Page?

Here is the audio tag in use (obviously you will only see it if your browser supports it):

You use the <audio> tag just like you use any other element:

<audio autoplay="autoplay" controls="controls">  
   <source src="music.ogg" />  
   <source src="music.mp3" />  
You can also include the source file's location in the beginning <audio> tag, rather than between the two, like this:
<audio src="music.ogg" controls="controls">

Also note that you can point the src to a file located on the server with your web page (a relative URL, like /audio/music.ogg), or a file located elsewhere on the web (an absolute URL, such as http://www.yoursite.com/music.ogg).

You will likely want to include some text inside the tag so that users whose browsers do not support the <audio> tag will have a clue as to what is going on (and why they aren't seeing the audio control on the page). You do that like this:

<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
You can use any HTML elements that are supported within the <audio> tag, such as italics, bold, links, objects such as Flash, etc.

The <audio> Tag's Attributes

The <audio> tag supports the full range of standard attributes in HTML5. These attributes are supported by all HTML5 tags, with very few exceptions. They include: New attributes for the <audio> tag include the following: You can see some of the new attributes in action here:
<audio loop="loop" autoplay="autoplay" controls="controls">  
   <source src="music.ogg" />  
   <source src="music.mp3" />  
The <audio> tag has a lot of attributes which can be used for additional controls, including the event attributes in HTML5. Events include window events, which are triggered for the window object, form events, which are triggered by actions that occur within an HTML form, keyboard and mouse events, and media events. Many of the events are the same as those included with previous versions of HTML. There are many new events for HTML5 though, and we will discuss them in an upcoming article on using events with HTML5.