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 10 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.