<audio> Tag in HTML – Controls, Autoplay & Live Example

Quick facts

Category	Flow content, phrasing content, embedded content (interactive and palpable when it has controls)
Content model	Optional <source> elements (if there is no src), then <track> elements, then fallback content
Tag omission	<audio>: neither tag can be omitted. <source> and <track> are void elements
Permitted parents	Any element that accepts embedded content
DOM interfaces	`HTMLAudioElement`, `HTMLSourceElement`, `HTMLTrackElement`

Syntax

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

<audio>

Attribute	Description
src	The URL of the sound file (or use <source> children instead)
controls	Shows the browser’s play, pause, timeline and volume controls
autoplay	Starts playing as soon as possible. Most browsers block this unless the audio is also muted
loop	Starts again from the beginning when it ends
muted	Starts with the sound off
preload	`none`, `metadata` (just length and details) or `auto` (the whole file)

<source>

Attribute	Description
src	The URL of this version of the file
type	The file’s format, e.g. `audio/mpeg` or `audio/ogg`, so the browser can skip formats it can’t play

<track>

Attribute	Description
kind	`subtitles`, `captions`, `descriptions`, `chapters` or `metadata`
src / srclang / label	The WebVTT file, its language and the name shown to users
default	Turns this track on by default

Common examples

A podcast episode with a download link

Offer a plain download link inside the element as a fallback, and below the player for people who want to listen later.

<audio controls preload="metadata" src="episode-12.mp3">
  <a href="episode-12.mp3">Download episode 12 (MP3)</a>
</audio>
<p><a href="episode-12.mp3" download>Download this episode</a></p>

Play a sound when a button is clicked

For short sound effects you don’t even need the element in your HTML — create an Audio object in JavaScript.

<button type="button" id="ding">Play sound</button>

<script>
  const ding = new Audio("ding.mp3");
  document.getElementById("ding").addEventListener("click", () => ding.play());
</script>

Your own play/pause button

Leave out controls and control the player from a button that shows its state.

<audio id="song" src="song.mp3"></audio>
<button type="button" id="toggle" aria-pressed="false">Play</button>

<script>
  const song = document.getElementById("song"), btn = document.getElementById("toggle");
  btn.addEventListener("click", () => {
    song.paused ? song.play() : song.pause();
    btn.textContent = song.paused ? "Play" : "Pause";
    btn.setAttribute("aria-pressed", String(!song.paused));
  });
</script>

<audio> vs Spotify and SoundCloud embeds

With <audio> you host the file yourself: no third-party branding or tracking, full control over the player, and the file is always available. The cost is storage and bandwidth, and you have to prepare the files (compression, formats) yourself.

Embedding a player from Spotify, SoundCloud or a podcast host uses an <iframe> and hands all of that to the platform, plus listeners can follow or subscribe there. For sound effects and short clips, use <audio>; for music and podcasts you want discovered, an embed is usually easier.

	<audio>	Platform embed
Hosting	Yours	The platform’s
Player control	Full	Limited
Best for	Sound effects, short clips	Music, podcasts

Common mistakes to avoid

Playing sound automatically. Browsers block it, and visitors find it jarring. Let people press play.
No controls and no custom buttons. Without controls (or your own buttons), there’s no way to pause or stop the sound.
Huge WAV files. Uncompressed audio is many times larger than MP3 or AAC; convert it before uploading.
No transcript. Deaf and hard-of-hearing visitors, and search engines, can’t access spoken content without one.

Accessibility & SEO tips

Publish a text transcript for podcasts and spoken audio — it helps accessibility and gives search engines words to index.
Use preload="metadata" so the page loads only the length and details until someone presses play.
Make custom controls real buttons with clear labels so they work with the keyboard and screen readers.

Browser support

Supported in all modern browsers. MP3 plays everywhere; AAC (.m4a) and Ogg are also widely supported, so MP3 alone covers almost every visitor.

Tutorial: How to embed a YouTube video

Related tags

Frequently asked questions

Why doesn't my audio autoplay?

Browsers block autoplaying sound so pages don't surprise visitors with noise. Autoplay usually only works with the muted attribute, or after the user has interacted with the page, for example by clicking a button.

Which audio format should I use?

MP3 plays in every modern browser, so it is the safest single choice. Add an OGG or AAC version as an extra <source> if you want smaller files for some browsers.

Can I add captions to audio?

You can add a <track>, but browsers don't display captions for <audio>. For accessibility, publish a text transcript on the page, or use <video> if you need on-screen captions.

How do I play a sound when a button is clicked?

Create the sound in JavaScript, for example const s = new Audio("ding.mp3");, and call s.play() inside the button's click handler. Browsers allow this because the visitor clicked.

How do I loop background music?

Add the loop attribute, for example <audio src="music.mp3" loop controls>. Avoid autoplaying it — let visitors start the music themselves.

Can I hide the audio player?

Yes. Leave out the controls attribute and the player is invisible. Then start and stop it from your own buttons with JavaScript.