Stop 02 · HTML5Topics · 7/12

Audio

In short

A podcast player, a pronunciation button, a notification ding. The <audio> tag plays sound with built-in controls, no library needed.

The `<audio>` element embeds sound with native browser controls, multiple source fallbacks, and JavaScript hooks for custom players. JavaScript can inspect playback state, duration, current time, volume, and events, allowing developers to build custom controls while still respecting browser autoplay policies.

The jaadu mascot pours chai at a roadside stall while an old radio plays music notes.

Think of it like this

The radio in a chai stall

The chai wala's radio has a play button, a volume knob and a station. <audio> gives you the same: a source file, play and pause controls, and volume. And like a polite chai wala, browsers won't blast it at you the moment you walk in.

Watch it happen

Why sound waits for a click

You

Page

Browser

ding.play() on load

1/5The page tries to play a sound as soon as it opens.

The big ideas

What you need to know

controls shows the player

Without the controls attribute, the audio is invisible. With it, you get play, seek and volume for free.

Autoplay is mostly blocked

Browsers usually block sound from playing until the user interacts with the page. Plan for a play button.

Offer formats with <source>

List more than one file with <source>. The browser plays the first format it supports. MP3 works almost everywhere.

preload controls downloads

preload="none" waits until play is pressed, saving data for users on mobile plans.

See it in code

Walk through the code

html

1<figure>2  <figcaption>Episode 4: Cracking your first internship</figcaption>3  <audio controls preload="none">4    <source src="/audio/ep4.ogg" type="audio/ogg" />5    <source src="/audio/ep4.mp3" type="audio/mpeg" />6    Your browser can't play this. <a href="/audio/ep4.mp3">Download it</a>.7  </audio>8</figure>9 10<button id="ding">Play sound</button>11<script>12  const ding = new Audio("/audio/ding.mp3");13  document.getElementById("ding").onclick = () => ding.play();14</script>

1/4controls shows the built-in player. preload="none" downloads nothing until play is pressed.

The text inside <audio> only shows in browsers that can't play it. The JS version plays a sound on click, which browsers allow.

Save yourself the pain

Common mistakes

Oops

Adding autoplay and expecting background music on page load.

Do this instead

Most browsers block it, and users hate it anyway. Let them press play.

Oops

Publishing a podcast with no transcript.

Do this instead

Add a transcript link below the player. Deaf users, and people in a noisy hostel, will thank you.

Your mission

Build a mini pronunciation guide

~20 min

Quick check

You add <audio src="song.mp3" autoplay> but nothing plays when the page loads. Why?

Go deeper

1Embed an audio file with native controls and multiple `<source>` formats. Validate your understanding by applying it in a small practical example.
2Build a custom play/pause button using the Audio API. Keep the first version small, then add one improvement after the core behavior works.
3Learn the autoplay restrictions modern browsers enforce for UX/battery reasons.