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

The

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

So How Is the

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

Your browser does not support the audio element.

You use the

<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 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 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

The

The

• 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

• 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