HTML Audio: The audio Tag, source, controls and Autoplay

What you will learn

The <audio> element embeds sound directly in a web page — a podcast player, background music, a voice note, a sound effect — with no plugin needed. In this lesson you will learn <audio> and its controls, how to offer multiple file formats with <source>, why autoplay usually does more harm than good, loop, muted, preload, and how to keep audio content accessible.

The basic audio player

<audio src="podcast-episode-1.mp3" controls></audio>

• <audio> embeds the sound file.
• src points to the audio file — relative or absolute, exactly like src on an <img>.
• controls is a boolean attribute (you met these earlier) that shows the browser’s built-in player: play/pause button, a seek bar, a volume slider, and usually a speed/menu option.

Without controls, the audio is completely invisible on the page and has no way for the visitor to play, pause, or control it themselves — unless you build your own controls with JavaScript (covered near the end of this lesson). Always include controls unless you have a specific JavaScript-powered interface replacing it.

Offering multiple formats with <source>

Not every browser supports every audio file format. Instead of relying on one src and hoping for the best, you can offer several formats and let the browser pick the first one it understands:

<audio controls>
  <source src="podcast-episode-1.mp3" type="audio/mpeg">
  <source src="podcast-episode-1.ogg" type="audio/ogg">
  <source src="podcast-episode-1.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

How this works:

• Each <source> offers one file, with type telling the browser what format it is before downloading anything.
• The browser tries them top to bottom and plays the first one it can actually play.
• The plain text after the last <source> ("Your browser does not support...") is a fallback message, only shown on extremely old browsers that don’t support <audio> at all. It’s good practice to include one, even though it will almost never be seen today.

Format	File extension	Notes
MP3	.mp3	The safest choice — supported almost everywhere
OGG (Vorbis)	.ogg	Open format, good compression, less universal support
WAV	.wav	Uncompressed, large file size, highest quality

In practice: if you only have one format available, MP3 alone (<audio src="file.mp3" controls>) covers the overwhelming majority of visitors, and you don’t need to convert it to three formats just for a personal project. Use multiple <source> elements when you’re building something for a wide public audience and want to be safe.

autoplay: usually a bad idea

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

autoplay starts the audio playing the instant the page loads, with no click from the visitor. It sounds convenient, but think about what it actually feels like: you open a tab while music is already playing somewhere else, or you’re in a quiet room, and suddenly sound blasts out of a page you haven’t even finished loading yet.

For this reason:

• Most modern browsers block autoplay with sound by default. The autoplay attribute is often silently ignored unless the audio is also muted.
• Even where it works, it’s usually bad user experience — it takes control away from the visitor.

If you genuinely need audio to start automatically (a background loop on a game, for example), the common working pattern is to start it muted, and let the visitor unmute if they want sound:

<audio src="ambient-loop.mp3" autoplay muted loop></audio>

The safer, more respectful default: leave autoplay off, and let controls let the visitor decide when to press play.

loop: repeat automatically

<audio src="ambient-music.mp3" controls loop></audio>

loop restarts the audio automatically every time it finishes — useful for background music or a short sound effect meant to repeat, not for a podcast episode or a voice message (nobody wants a 40-minute episode to suddenly restart from zero).

muted: start with the volume off

<audio src="music.mp3" controls muted></audio>

Starts the player with volume at zero. The visitor can still unmute it using the built-in controls. As shown above, this is also the attribute that makes autoplay actually work in most browsers.

preload: how much to load in advance

preload is a hint to the browser about how eagerly it should start downloading the audio file before the visitor presses play:

<audio src="podcast.mp3" controls preload="none"></audio>
<audio src="podcast.mp3" controls preload="metadata"></audio>
<audio src="podcast.mp3" controls preload="auto"></audio>

Value	Meaning
none	Don’t download anything until the visitor presses play. Good for a page with many audio clips — you don’t want to download them all just because they’re on the page.
metadata	Only download basic info (like the duration), not the actual sound data. A good middle ground — the seek bar shows the right length immediately, without wasting bandwidth.
auto	Let the browser download as much as it thinks useful — often the whole file. Reasonable when there’s only one audio player on the page and you expect most visitors to play it.

If you don’t set preload at all, the browser picks its own default (commonly behaving like metadata).

A complete example

<h3>Episode 12: Building Your First Website</h3>

<audio controls preload="metadata">
  <source src="episode-12.mp3" type="audio/mpeg">
  <source src="episode-12.ogg" type="audio/ogg">
  Your browser does not support the audio element.
  <a href="episode-12.mp3">Download the audio file</a> instead.
</audio>

<p>
  <a href="episode-12-transcript.html">Read the full transcript</a>
</p>

Notice two accessibility-friendly additions here: a download link as part of the fallback content, and a transcript link below the player.

Accessibility: audio needs a text alternative too

Just like an image needs alt text, audio content needs a way for people who can’t hear it (someone who is deaf or hard of hearing, or simply in a place where they can’t play sound) to still get the information. HTML has no automatic captioning for <audio> the way <video> supports caption tracks, so the standard practice is:

• Provide a transcript — a text version of what’s said — linked near the player, as in the example above.
• If the audio is spoken content (a podcast, an interview), this also helps search engines understand and index the content.

Common mistakes

• Forgetting controls. Without it, the audio is on the page but the visitor has no way to interact with it (unless you’re building custom JavaScript controls).
• Using autoplay without muted. In most modern browsers it will simply fail to play, and where it does work, it usually annoys visitors.
• Using loop on long content like a full podcast episode, where it makes no sense.
• Offering only one obscure format (like just .wav) with no MP3 fallback, risking that some visitors can’t play it at all.
• Setting preload="auto" on a page with many audio players, causing the browser to download far more data than the visitor will ever use.
• Never providing a transcript, leaving audio content completely inaccessible to visitors who cannot hear it.

Interview-style questions

Why should you almost always include the controls attribute? Without it, the visitor has no built-in way to play, pause, or adjust the volume of the audio — the element is present but unusable unless you build a custom JavaScript interface.

Why does autoplay often not work as expected? Most modern browsers block audio from autoplaying with sound to protect the user experience; it typically only works if the audio is also muted.

What’s the difference between preload="none" and preload="metadata"? none avoids downloading anything until the visitor presses play. metadata downloads just enough to know details like the duration, without downloading the actual audio data — a good middle ground for most pages.

How do you make audio content accessible to someone who can’t hear it? Provide a text transcript linked near the player, since <audio> has no built-in captioning the way <video> does.

Practice

1. Use the Practice in Editor button. Change preload="none" to preload="metadata" on the second player and think about when you’d choose each.

2. Add a third <source> in OGG format to the first player (even a fake file name is fine for practice) and explain the order the browser checks them in.

3. Build an <audio> player for background music that starts automatically but respects visitors — using the muted-autoplay pattern from this lesson.

4. Fix this code (it has two mistakes: autoplay without muted, and loop on what is clearly long spoken content):

   <audio src="full-interview-45min.mp3" controls autoplay loop></audio>

Recap

• <audio> embeds sound; always add controls so visitors can play, pause and adjust the volume themselves.
• Use multiple <source> elements to offer different formats (MP3 is the safest single choice) and end with a fallback message.
• Avoid autoplay unless paired with muted — most browsers block unmuted autoplay, and it’s poor user experience regardless.
• loop suits short background sounds, not long spoken content; muted starts the volume at zero.
• preload (none, metadata, auto) controls how eagerly the browser downloads the file before playback.
• Provide a text transcript for spoken audio, since <audio> has no built-in captions.