HTML <audio> Element

The <audio> element embeds sound or an audio stream in a web page. Audio can be loaded with the src attribute or by placing one or more <source> elements inside the audio element.

Syntax

<audio controls src="audio-file.mp3"></audio>

The opening and closing tags are both required.

Attributes

The <audio> element supports the global HTML attributes and the following element-specific attributes:

Attribute	Description
`src`	Specifies the URL of the audio resource.
`crossorigin`	Controls how cross-origin requests for the audio resource are handled.
`preload`	Provides a hint about how much of the audio resource should be loaded before playback begins.
`autoplay`	Indicates that playback should begin automatically when possible.
`loop`	Causes the audio to begin again automatically after it reaches the end.
`muted`	Specifies that the audio should be muted by default.
`controls`	Displays the browser's built-in playback controls.
`loading`	Provides a hint about whether loading of the audio resource may be deferred.

Example

The following example embeds an MP3 file and displays the browser's built-in audio controls:

<audio controls>
  <source src="sounds/sample-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

The <source> element identifies the audio file and its media type, while the controls attribute displays the browser's playback controls.

Try It Yourself

Edit the <audio> markup to experiment with the browser's playback controls and audio attributes.

Play in Editor

Usage Notes

Audio can be provided directly with the src attribute or with one or more nested <source> elements. Using multiple sources allows the browser to select a format it supports.

The controls attribute displays the browser's built-in controls for actions such as play, pause, volume, and playback position.

Browsers commonly restrict automatic audio playback, especially when sound would begin without user interaction. Do not rely on autoplay working in every situation.

Text placed between the opening and closing <audio> tags can provide fallback information for browsers that do not support the element.

The <audio> element itself does not determine which audio formats every browser can play. Support for formats and codecs can vary, so the available media files should be chosen with browser compatibility in mind.

Accessibility

Provide an accessible alternative when audio contains important spoken information or other content that users need to understand. A text transcript is often appropriate for spoken audio.

Avoid automatically playing audio when possible. Unexpected sound can be distracting or disruptive, and visitors should be able to control playback themselves.

If custom controls are created instead of using the browser's built-in controls, make sure they can be operated with a keyboard and clearly communicate their purpose and current state.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The <audio> element is widely supported in modern browsers. Support for individual audio formats, codecs, and newer attributes can vary.

<source> - Specifies one or more alternative media resources for an audio or video element.

<video> - Embeds video content and can also include audio.

<track> - Provides timed text information such as captions or subtitles for media elements.

Specifications

HTML Living Standard: The <audio> Element

HTML <audio> Element