HTML Audio Tag: How to Embed Music on Your Website

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 multimediaand 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" />  
</audio> 

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 srcto 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.
</audio>

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:

• accesskey – this specifies a keyboard shortcut for a given element
• class – this specifies a classname for a given element, to be used in conjunction with a style sheet
• contenteditable – specifies whether a user is allowed to edit the content
• contextmenu – specifies the context menu for a given element
• dir – specifies the direction of the text for content in a given element
• draggable – specifies if a user is allowed to drag a given element
• dropzone – specifies the event that occurs when an item or data is dragged and dropped into a given element
• hidden – specifies if a given element is hidden or not
• id – specifies a unique identification for a given element
• lang – specifies a language code for the content in a given element
• spellcheck – specifies if a specific element will need to be subjected to a spelling and grammar check
• style – defines an inline style for a specific element
• tabindex – specifies the tab order of a specific element
• title – specifies a title for a specific element

New attributes for the <audio> tag include the following:

• autoplay – if this attribute is included, the audio will begin to play once it is ready
• controls – if this one is included, controls for the audio file will be included on the page (which is a great idea–it is very annoying to not have a way to stop the audio from playing)
• loop – if this one is included, the audio will loop and play again once it has finished
• preload – this one has three parameters: auto, which plays once it has loaded, metadata, which only displays the data associated with the audio file, and none, which means it will not preload
• src – this one’s value is simply the URL of the audio file you wish to play

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" />  
</audio> 

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.