Audio with fallbacks in HTML

Two formats and a link, because no single codec plays everywhere.

<figure>
  <figcaption>Episode 12: the keyboard that clicks back</figcaption>
  <audio controls preload="none">
    <source src="/audio/ep12.opus" type="audio/ogg; codecs=opus">
    <source src="/audio/ep12.mp3" type="audio/mpeg">
    <a href="/audio/ep12.mp3">Download episode 12</a>
  </audio>
</figure>

How it works

The browser takes the first <source> whose type it can play.
preload="none" means nothing downloads until the visitor presses play.
Content between the tags is the fallback for a browser with no audio.

The run, in numbers

Lines: 8
Characters to type: 287
Tokens: 55
Three-star pace: 75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 44 seconds.

Type this snippet

Step 4 of 9 in Media & embeds, step 11 of 23 in Semantics & metadata.

← Previous Next →