Skip to main content
📄 HTML & the platform·Module A4 · Lesson 8
TaskBuild an <audio> with controls and two sources: /track.mp3 (audio/mpeg) and /track.ogg (audio/ogg).

<audio>: same shape, different content

60 XP4 min
Theory

<audio> mirrors <video>

<audio controls preload="metadata">
  <source src="/podcast-ep-01.mp3" type="audio/mpeg" />
  <source src="/podcast-ep-01.ogg" type="audio/ogg" />
</audio>

All the same attributes that work on <video> work on <audio>: controls, preload, multiple <source> for format fallback, autoplay + muted.

Format support

  • MP3 — universally supported.
  • WebM/Opus — better quality at the same bitrate; supported on every modern browser except Safari (last I checked — verify).
  • AAC (m4a) — Apple's preference, widely supported.

For a podcast, MP3 is the safe default. WebM as a smaller backup.

Transcripts

For accessibility, audio content should always have a written transcript nearby:

<audio controls src="/podcast.mp3"></audio>
<details>
  <summary>Transcript</summary>
  <p>Anna: Welcome to the show…</p>
</details>

Audio doesn't support <track> for captions in the same way video does (the spec allows it but browser support is patchy). Inline transcript is the reliable answer.

🔒

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.

Sign up — free trial →

First 15 lessons in each track are free. No card needed for those.

PreviousNext lesson →

Get one Python or web tip a day — by email

Short, hand-written, no spam. Unsubscribe in one click.