Français

<audio>

Embed audio: podcast, music, and accessibility pitfalls

— 1 min read

  • HTML
  • accessibility
  • semantics
  • media

<audio> + <source> + <track> — Audio

The <audio> element embeds a native audio player. <source> offers multiple formats and <track> adds subtitles or a transcript in WebVTT format.

When to use it

You want to embed a podcast, a music clip, or a voice message. The controls attribute is required — without it, users have no way to pause or adjust the volume. Autoplay is forbidden: sound that starts without consent is an assault, especially for screen reader users.

What you gain

Accessibility: controls exposes playback commands to keyboard and assistive technologies. A subtitle <track> makes audio content accessible to deaf users. Without a transcript, your podcast does not exist for them.

Code example

<audio controls preload="metadata">
  <source src="/audio/episode-42.opus" type="audio/ogg; codecs=opus" />
  <source src="/audio/episode-42.mp3" type="audio/mpeg" />
  <track
    kind="subtitles"
    src="/audio/episode-42.vtt"
    srclang="fr"
    label="Transcription"
    default
  />
  <p>Your browser does not support the audio element.</p>
</audio>

Further reading