HTML 5 <audio> Tag

The HTML <audio> tag is used to specify audio on an HTML document.

For example, you could embed a music file on your web page for your visitors to listen to.

The <audio> tag was introduced in HTML 5.

Example

Modify the code below, then click "Update". See below for attributes.

Source Code	Result
<audio src="/music/lostmojo.wav"> <p>If you are reading this, it is because your browser does not support the audio element.</p> </audio>

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Attribute	Description
src	Specifies the location of the audio file. Its value must be the URI of an audio file.
preload	Specifies whether the audio should be preloaded or not, and if so, how it should be preloaded. This attribute allows the author to provide a hint to the browser/user agent about what the author thinks will lead to the best user experience. This attribute may be ignored in some instances. For example, if the user has disabled preloading or if there are network connectivity issues. Possible values: none metadata auto Note that the autoplay attribute can overrride the preload attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the preload attribute). Despite this, you can still provide both attributes.
autoplay	Specifies whether or not to start playing the audio as soon as the object has loaded. This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autoplay or autoplay="autoplay"). Possible values: [Empty string] autoplay
loop	Specifies whether to keep re-playing the audio once it has finished. This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either loop or loop="loop"). Possible values: [Empty string] loop
controls	Specifies whether or not to display audio controls (such as a play/pause button etc). This attribute is a boolean attribute. Therefore, the mere presence of this attribute equates to a true value. You can also specify a value that is a case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either controls or controls="controls"). Possible values: [Empty string] controls

Global Attributes

The following attributes are standard across all HTML 5 tags.

accesskey	draggable	style
class	hidden	tabindex
contenteditable	id	title
contextmenu	lang
dir	spellcheck

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort	onerror*	onmousewheel
onblur*	onfocus*	onpause
oncanplay	onformchange	onplay
oncanplaythrough	onforminput	onplaying
onchange	oninput	onprogress
onclick	oninvalid	onratechange
oncontextmenu	onkeydown	onreadystatechange
ondblclick	onkeypress	onscroll
ondrag	onkeyup	onseeked
ondragend	onload*	onseeking
ondragenter	onloadeddata	onselect
ondragleave	onloadedmetadata	onshow
ondragover	onloadstart	onstalled
ondragstart	onmousedown	onsubmit
ondrop	onmousemove	onsuspend
ondurationchange	onmouseout	ontimeupdate
onemptied	onmouseover	onvolumechange
onended	onmouseup	onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.