HTML5 <audio> Tag

The HTML <audio> tag is used to embed sound or audio content in documents. This element may contain one or more audio sources, represented using the src attribute or the <source> tag. The browser will then choose the most suitable one file to play for the user.

Both the starting and ending tag are required for this element. The parent of the <audio> tag can be any element that accepts embedded content.

The content permitted inside this element depends on the presence of the src attribute:

If the element has a src attribute: zero or more <track> element are permitted inside this element. They can followed by transparent content that contains no media elements. In other words, there should not be any <audio> or <video> tags.

If the element does not have a src attribute: zero or more <source> elements are permitted inside this element. They can be followed by zero or more <track> elements. The <track> elements in turn can be followed by transparent content that contains no media elements, that is no <audio> or <video> tags.

You can also provide fallback content for browsers not supporting the <audio> element. The fallback should be added inside the opening and closing <audio></audio> tags.

Additionaly, you can give your users some basic playback functionality by using the controls attribute. For more advanced usage, you can manipulate audio playback and controls using the HTML Media API.

Attributes

autoplay

This is a Boolean attribute. If specified (even when the value specified is "false"!), the audio will automatically begin playback as soon as it can do so without waiting for the entire audio file to finish downloading.

buffered

You can read the value of this attribute to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.

controls

If this attribute is present, the browser will show users some controls to allow them to control audio playback. This includes controlling the volume, seeking, and pause/resume playback functionality.

loop

This is a Boolean attribute. When this attribute is specified, the browser will automatically seek back to the start upon reaching the end of the audio.

muted

This is a Boolean attribute which indicates whether the audio will be initially silenced or muted. The default value is false.

played

The value of this attribute is a TimeRanges object. It value indicates all the ranges of the audio that have been played.

preload

This enumerated attribute is used to provide a hint to the browser about what the author thinks will lead to the best user experience for the visitor. This attribute can have one of the following values:

  • none: This value indicates that the audio should not be preloaded.
  • metadata: This value indicates that only audio metadata (e.g. length) should be fetched first.
  • auto: This value indicates that the whole audio file could be downloaded, even if the user is not expected to use or play it.
  • the empty string: An empty string will behave just like the auto attribute.

When not set, the default value of preload is browser-defined (i.e. each browser may have its own default value). The spec advises that it should be set to metadata.

The autoplay attribute has precedence over the preload attribute. This makes sense because if autoplay is specified, the browser would obviously need to start downloading the audio for playback. The specification does not force the browser to follow the value of this attribute, it acts as a mere hint.

src

This attribute is used to specify the URL of the audio to embed. This is subject to HTTP access controls. This attribute is optional. You can instead choose to use the <source> element within the audio block to specify the audio to embed.

volume

This attribute is used to specify the playback volume. It can have any value in the range 0.0 (which means silent) to 1.0 (which means the audio will be played loudest).

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top