`<audio>` Audio

Plays sound, like music or a podcast episode.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

<audio> plays sound. Without controls it shows nothing at all, so add it to give people play, pause and volume buttons. Point src at a single file, or list several <source> elements in different formats.

Skip autoplay. Sound that starts on its own is annoying, it gets in the way of screen readers, and most browsers block it anyway. Text between the tags is a fallback for very old browsers. If the audio is spoken, publish a transcript.

Most attributes are shared with video, as the audio element in the HTML Living Standard (opens in a new tab) shows. Practise in the Audio and Video lesson.

Syntax

<audio controls src="sound.mp3">
  <a href="sound.mp3">Download the audio</a>
</audio>

When to use it

<audio> is for sound the visitor decides to play. A podcast episode on its show page, pronunciation samples in a language lesson, a song preview in a music shop and a recorded message from a team leader are typical. The native controls work from the keyboard and match each device and operating system.

Short interface sounds like a click or a notification ping usually come from scripts, and plenty of people switch them off anyway. When the sound goes with moving pictures or slides, use video and keep captions and visuals in one place.

preload is a hint, nothing more, and its default differs from browser to browser. On a page listing twenty episodes, set preload="none" so the browser doesn't fetch data for every file before anyone presses play. And loop with no visible controls leaves visitors stuck with a sound they can't stop.

Attributes

Attribute	What it does
`src`	URL of the audio file.
`controls`	Shows the browser's playback controls.
`autoplay`	Starts playing automatically (usually blocked; avoid).
`loop`	Restarts when it reaches the end.
`muted`	Starts muted.
`preload`	none, metadata or auto: how much to load in advance.
`crossorigin`	CORS mode for the request.

Live example

Edit the code and watch the preview.

<audio controls src="t-rex-roar.mp3">
  Your browser does not support audio.
</audio>

More examples

Podcast episode

A single episode with a native player. Nothing downloads before play is pressed. The fallback link offers the file itself, and a second link leads to a transcript for readers.

<article>
  <h3>Episode 12: Baking basics</h3>
  <audio controls preload="none" src="episode-12.mp3">
    <a href="episode-12.mp3">Download episode 12 (MP3, 24 MB)</a>
  </audio>
  <p><a href="#transcript">Read the transcript</a></p>
</article>

Pronunciation samples

Each French word is paired with a small player in a description list. With lang on every term, screen readers say the written word correctly as well. No player loads anything until someone uses it.

<dl>
  <dt lang="fr">croissant</dt>
  <dd><audio controls preload="none" src="croissant-fr.mp3">Audio not available.</audio></dd>
  <dt lang="fr">bonjour</dt>
  <dd><audio controls preload="none" src="bonjour-fr.mp3">Audio not available.</audio></dd>
</dl>

Tip: Add controls, and keep autoplay switched off.

Browser support

Every current browser supports audio. MP3 and AAC play everywhere. Older Safari versions could not play Ogg Vorbis or Opus, so keep an MP3 source as the fallback. The audio element support table (opens in a new tab) has the rest.

Accessibility

Prerecorded audio needs a transcript (WCAG 1.2.1). If audio plays automatically for more than 3 seconds, users must be able to pause or mute it (WCAG 1.4.2). The 3-second rule is explained in the W3C note Understanding Audio Control (opens in a new tab).

Common mistakes

Wrong

<audio src="song.mp3" autoplay></audio>

Right

<audio src="song.mp3" controls></audio>

No controls means no visible player and no way to stop it. Autoplay is usually blocked anyway.

Frequently asked questions

Why does my HTML audio not autoplay?

Modern browsers block autoplay with sound until the user has interacted with the page. Nobody likes a noisy surprise. autoplay can fail without any error. Show the player with the controls attribute and let people press play. Autoplaying audio also clashes with screen readers, so it is an accessibility problem too.

Which audio format should I use on the web?

MP3 and AAC (in .m4a) play in all modern browsers. Opus (in .ogg or .webm) sounds better at small file sizes. The safe approach is to offer more than one, using <source> elements with a type attribute, and to put fallback text with a download link inside the element for very old browsers. Format support by browser is listed in Wikipedia's HTML audio (opens in a new tab) article.

Practise it

Audio and Video (Module 3: Links and Media)
Project: Travel Postcard (Module 3: Links and Media)

Related media elements

<img>Displays an image; src and alt required.<picture>Holds several image sources and lets the browser choose one.<source>One alternative file inside picture, audio or video.<track>Adds WebVTT captions, subtitles or chapters to audio and video.<figure>A self-contained image, chart, code listing or quote, optionally captioned.<figcaption>A figure's caption, placed as its first or last child.<video>Adds a video player.<iframe>Shows another web page inside a frame on yours.<embed>Inserts external content, like a PDF, that the browser or a plugin displays.<object>Embeds an external resource and holds fallback content for it.<canvas>A bitmap surface that JavaScript draws graphics on.<svg>Vector graphics drawn right in the HTML, sharp at any size.<math>Math notation written as MathML markup.<map>Holds the clickable areas that turn an image into an image map.

<audio> Audio