HTML <audio> Tag
The HTML <audio> tag embeds sound such as music or audio streams. Learn its attributes, formats, and the autoplay policy with W3docs.
The <audio> tag is one of the HTML5 elements added to allow embedding audio files into a web page. It plays music, podcasts, sound effects, and any other audio stream with the browser's native player, so you no longer need a Flash plugin or a third-party widget.
This page covers how to embed audio, which file formats browsers support, the attributes that control playback (controls, autoplay, loop, muted, preload), the autoplay policy that trips up almost everyone, and how to make audio accessible.
The <source> tag or the src attribute points to the audio file. The path can be an absolute or a relative URL. For video, the closely related <video> tag works the same way.
Syntax
The <audio> tag comes in pairs. You can either set the file directly with src, or nest one or more <source> elements between the opening (<audio>) and closing (</audio>) tags so the browser can choose a format it supports.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Example of the HTML <audio> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Supported audio formats
Not every browser can decode every codec, so HTML audio has three formats that matter in practice. The table below shows the file extension, the MIME type you put in type="", and broad support:
| Format | MIME type | Support |
|---|---|---|
| MP3 | audio/mpeg | Supported by all modern browsers. The safest default. |
| WAV | audio/wav | Supported everywhere, but files are uncompressed and large. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. Not Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. Not Safari. |
Because MP3 plays everywhere, a single <source src="audio.mp3" type="audio/mpeg"> is usually enough. You only need extra formats if you want a royalty-free alternative (OGG/WebM) or the highest quality (WAV).
How the browser picks a <source>
When you nest several <source> elements, the browser walks them top to bottom and plays the first one it can decode — the rest are ignored. List your preferred or most efficient format first. The type attribute lets the browser skip formats it does not support without downloading them, so it is good practice to always include it.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>The controls attribute
Without controls, the audio element renders nothing visible and the user has no way to start it. The controls attribute tells the browser to display its native player UI (play/pause, timeline, volume):
<audio src="audio.mp3" controls></audio>Example of the HTML <audio> tag with the controls attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>The loop attribute
loop is a boolean attribute. When present, the clip restarts from the beginning every time it finishes — handy for background ambience or a looping sound effect:
<audio src="audio.mp3" controls loop></audio>Autoplay and the muted attribute
This is the most common source of confusion with HTML audio, so read it carefully.
The autoplay attribute asks the browser to start playing as soon as the media is ready, without the user pressing play:
<audio src="audio.mp3" autoplay></audio>In practice, modern browsers block autoplay with sound. Chrome, Safari, and Firefox refuse to autoplay audible media until the user has interacted with the page (a click, a tap, a key press). This protects people from web pages that blast sound unexpectedly. If you set autoplay on an audible clip, it will usually just stay silent and paused.
The one reliable way to make autoplay work is to also set muted. A muted clip carries no sound, so the browser allows it to start on its own:
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>The muted attribute simply starts the element with its volume off; the user can unmute it through the controls. For audio specifically, a muted autoplaying clip is rarely useful on its own, but the pattern is worth knowing because the same rule governs the <video> tag, where muted autoplay is everywhere.
If you genuinely need sound to start, trigger playback from a user action instead. The HTML DOM JavaScript API lets you script the element with methods like .play() from inside a click handler, which the browser treats as user-approved.
The preload attribute
preload is the only <audio> attribute that takes a value rather than being a boolean. It hints how much of the file the browser should fetch before the user presses play:
auto— the browser may download the whole file in advance. Use it when you expect the audio to be played and want instant playback.metadata— only fetch metadata such as duration and the first bytes, not the audio itself. A good middle ground that lets the controls show the track length without wasting bandwidth.none— do not preload anything until the user interacts. Best when the page has many clips, or when most visitors will not play the audio.
<audio src="audio.mp3" controls preload="metadata"></audio>preload is only a hint — a browser may ignore it to save data, and it is overridden by autoplay, which forces the file to load.
Accessibility
Audio that only exists as sound excludes anyone who cannot hear it. A few additions make embedded audio inclusive:
- Provide a text transcript. For speech-heavy audio (interviews, podcasts), publish the words near the player so screen-reader and deaf users get the same content.
- Add captions with
<track>. A<track kind="captions">element lets browsers display timed text for the audio. - Label the player with
aria-labelwhen there is no visible caption, so assistive tech announces what the clip is. - Use the fallback text between the tags as graceful degradation: browsers that cannot play the element show it instead.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Attributes
The <audio> tag has attributes that indicate the path to the audio file, playback behavior, etc. The controls, autoplay, loop, and muted attributes are boolean; their values can be omitted. If specified, the corresponding function is enabled by default.
| Attribute | Value | Definition |
|---|---|---|
| autoplay | Plays the audio file automatically after loading the page. | |
| controls | Displays the control panel (play/pause, volume, etc.). If the controls attribute is missing, the audio will not be visible on the page. | |
| loop | Repeats the audio file continuously from the beginning after it finishes. | |
| muted | Mutes the audio by default. | |
| preload | auto, metadata, none | Defines the preloading strategy for the audio file. |
| src | URL | Specifies the path to the audio file. |
The <audio> tag supports the Global Attributes and the Event Attributes.