HTML — Audio

What is the <audio> element and why you might need it

The <audio> tag lets you place sound on a web page.
It works the same way a music player does, but the player lives inside the browser.
You can play music, podcasts, sound effects, or any short recording without leaving the page.

Why use it?

• No extra plugins or software are required.
• Works on desktop, tablet, and phone browsers.
• Gives you control over how the sound starts, stops, and repeats.

Good to know: Modern browsers support the <audio> element native­ly, so you don’t need Flash or Java Applets.

Basic audio embedding

The simplest way to add sound is a single <audio> element with the src attribute.

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

What the browser displays

A small player with a play/pause button, a timeline, and a volume control appears.
The player shows the file name “birdsong.mp3” when you hover over it.

Controlling playback with attributes

The <audio> tag supports several Boolean attributes that change its behavior.

Attribute	Meaning	Typical use
controls	Shows the built‑in UI	Most pages
autoplay	Starts automatically	Background music
loop	Restarts when it ends	Ambient loops
muted	Starts silent	Auto‑play policies
preload	Hints how much to load early	none, metadata, auto

<audio src="rain.wav"
       controls
       autoplay
       loop
       muted
       preload="metadata">
</audio>

What the browser displays

The player appears muted and starts playing a looping rain sound as soon as the page loads.

Adding multiple source files

Not every browser understands the same audio format.
To reach the widest audience, list several <source> elements inside the <audio> tag.

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

What the browser displays

A normal player with play/pause, timeline, and volume controls.
The browser picks the first source it can decode (usually .mp3 or .ogg).

Common mistake: Forgetting the type attribute on <source> can make the browser try to download every file before picking one.

Using fallback text

If a user’s browser truly cannot play any of the provided formats, you can show a helpful message or a download link.

<audio controls>
  <source src="alert.mp3" type="audio/mpeg">
  <source src="alert.ogg" type="audio/ogg">
  <p>
    Your browser does not support HTML5 audio.<br>
    <a href="alert.mp3">Download the sound file</a>
  </p>
</audio>

What the browser displays

The same player UI appears for supported browsers.
For unsupported browsers, the paragraph with the download link is shown instead.

Styling the audio player (basic CSS)

The default player is functional but you can change its size, border, or background with CSS.

<style>
  .my-player {
    width: 300px;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
</style>

<audio class="my-player" controls>
  <source src="click.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

What the browser displays

A wider player with a green border and a light‑gray background.

Advanced: JavaScript interaction

Sometimes you need to start, stop, or change volume from a script instead of the built‑in controls.

<audio id="myAudio" src="heartbeat.mp3"></audio>

<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').volume+=0.1">Volume +</button>
<button onclick="document.getElementById('myAudio').volume-=0.1">Volume –</button>

What the browser displays

Four buttons appear below an invisible audio element. Clicking “Play” starts the heartbeat sound.

Accessibility considerations

Screen readers cannot hear sound, so you should provide a text description.

<audio controls aria-label="Background forest ambience">
  <source src="forest.mp3" type="audio/mpeg">
  <track kind="descriptions" src="forest.vtt" srclang="en">
  Your browser does not support audio.
</audio>

• The aria-label gives a short spoken description for assistive technologies.
• The optional <track> element can contain a transcript or description file.

Common mistakes checklist

• Forgot the controls attribute, leaving the player invisible.
• Used only one audio format that some browsers cannot decode.
• Placed the <audio> tag inside a <p> that forces it to become inline and break layout.
• Ignored the type attribute on <source> elements.
• Autoplayed audio without muted, causing browsers to block playback.

Mini Practice

1. Embed a short mp3 file with visible controls.
2. Add a second ogg source so the same player works on older browsers.
3. Create a player that starts muted, loops, and preloads only metadata.
4. Write a small script that pauses the audio when a user clicks a “Stop” button.
5. Add an aria-label that describes the sound for screen‑reader users.