🎵 Phase 6 · Images & Media🟢 BeginnerMODULE 19
Audio
Course progress54%
🎯 What you'll learn: Embedding sound with
<audio>, the controls attribute, multiple source formats for browser compatibility, and why autoplay with sound is almost always the wrong choice.
Section 1
The audio Element
<audio> embeds a sound file. Add controls to show the browser's built-in play/pause/volume UI — without it, the player is invisible and unusable.
audio-basic.html
HTML
<audio src="podcast-episode-1.mp3" controls></audio>
Section 2
Multiple Sources for Browser Compatibility
Not every browser supports every audio format. Provide multiple <source> elements — the browser tries each in order and uses the first one it supports.
audio-sources.html
HTML
<audio controls> <source src="episode.mp3" type="audio/mpeg"> <source src="episode.ogg" type="audio/ogg"> Your browser doesn't support the audio element. <!-- Fallback text/link for very old browsers --> </audio>
| Attribute | Effect |
|---|---|
controls | Shows play/pause/volume/seek UI |
loop | Restarts automatically when it ends |
muted | Starts silent (required alongside autoplay in most browsers) |
preload="none" | Don't download anything until the user presses play |
Section 3
Why Autoplay-With-Sound Is a Bad Idea
Modern browsers actively block autoplay with sound unless the user has already interacted with the page — precisely because unsolicited noise is one of the most-hated web UX patterns. If you must autoplay, it must be muted.
audio-autoplay.html
HTML
<!-- This will be BLOCKED by most browsers --> <audio src="music.mp3" autoplay></audio> <!-- This is allowed, because it's silent --> <audio src="music.mp3" autoplay muted></audio>
⚠️
Best practice: skip autoplay entirely
Even where technically allowed, autoplaying audio the user didn't ask for is a poor experience and can be jarring, especially on mobile in public. Let the user press play.
Section 4
Providing a Text Alternative
Audio content isn't accessible to deaf or hard-of-hearing users unless you provide a transcript. A simple link to a text version alongside the player is a low-effort, high-value accessibility win.
audio-transcript.html
HTML
<audio controls> <source src="episode.mp3" type="audio/mpeg"> </audio> <p><a href="episode-transcript.html">Read the full transcript</a></p>
🧩 Knowledge Check — Lesson 19
5 questions to test your audio knowledge.
1. What does the controls attribute do on <audio>?
2. Why provide multiple <source> elements for one audio file?
3. Why do browsers block autoplay-with-sound by default?
4. What attribute must accompany autoplay for it to reliably work?
5. How do you make audio content accessible to deaf users?
Coding Challenge — Lesson 19
Apply what you learned · Beginner Level
Challenge: Build a Podcast Player Block
1. Build an <audio> player with controls and two <source> elements (mp3 and ogg).
2. Add a fallback text message for browsers that don't support audio.
3. Add a link below it to a transcript page.
1. Build an <audio> player with controls and two <source> elements (mp3 and ogg).
2. Add a fallback text message for browsers that don't support audio.
3. Add a link below it to a transcript page.
💡 Show hints if you're stuck
- Structure:
<audio controls><source ...><source ...>Fallback text</audio>
Finished this lesson?
Mark it complete to track your progress.
Module 19 of 62Phase 6 — Images & Media