HTML <audio> Tag

The HTML <audio> tag is used to create an 'audio' element, which represents audio embedded into an HTML document.

A common usage of the <audio> element is to embed music files into a web page but it could be used for other purposes. For example, you could use the <audio> element to present nature sounds, a voice over narration, a recorded interview, etc.

The <audio> tag was introduced in HTML 5.

Syntax

The <audio> tag is written as <audio></audio> with any attributes provided within the start tag. Attributes can specify the actual audio file to play, as well as other options such as whether to play automatically, whether the browser should display the controls or not, etc.

Like this:

Any content between the opening and closing <audio> tags is fallback content. This content is displayed only by browsers that don't support the <audio> tag.

Example

This example uses the controls boolean attribute to tell the browser to display controls (so that the user can play/pause, modify the volume, etc).

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <audio> element accepts the following attributes.

AttributeDescription
srcSpecifies the location of the audio file. Its value must be the URI of an audio file.
crossoriginThis attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource Sharing. The purpose of the crossorigin attribute is to allow you to configure the CORS requests for the element's fetched data. The values for the crossorigin attribute are enumerated.

Possible values:

ValueDescription
anonymousCross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication.
use-credentialsCross-origin CORS requests for the element will have the credentials flag set.

If this attribute is not specified, CORS is not used at all.

An invalid keyword and an empty string will be handled as the anonymous value.
preloadSpecifies 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.
autoplaySpecifies 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
mediagroupFor synchronizing playback of audio files (or media elements). Allows you to specify media elements to link together. The value is a string of text, for example: mediagroup=movie. Audio files/media elements with the same value are automatically linked by the user agent/browser.

An example of where the mediagroup attribute could be used is where you need to overlay a sign-languge interpreter track from one movie file over the top of another.
loopSpecifies 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
controlsSpecifies 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 elements. Therefore, you can use these attributes with the <audio> tag , as well as with all other HTML tags.

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

Event Handlers

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.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.