Input HarborISSUE #24 of 46

audio · formats · streaming

FormaVSCaptain Invalid Input

Forma says<audio> embeds sound with the same source/controls model as video — for music, podcasts, and UI sounds.

<audio controls> with one or more <source> elements plays sound. MP3 is near-universal; offer OGG as a second source for completeness. preload hints how much to buffer (none, metadata, auto).

For short UI sounds, you'll often skip controls and trigger playback from JavaScript with audio.play(). Remember autoplay-with-sound is blocked until the user interacts with the page.

Power-ups you unlock

<audio controls> + <source> — same model as video
MP3 is the safe format; add OGG as a fallback
preload hints buffering: none / metadata / auto
JS audio.play() needs a prior user interaction for sound

Captain Invalid Input attacks — common mistakes

Autoplaying audio on load (blocked, and users hate it)
preload="auto" on many clips → wasted bandwidth
Only an OGG source → no sound in some browsers

Boss battleAdd an <audio controls> with an MP3 source and preload="metadata", then a button that calls audio.play() from JS.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;display:grid;place-items:center;height:100vh;margin:0;gap:12px">
  <audio id="a" controls preload="metadata">
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
  </audio>
  <button onclick="document.getElementById('a').play()"
          style="font:inherit;color:#b388ff;background:none;border:1px solid #b388ff;padding:8px 14px;border-radius:3px">
    play from JS
  </button>
</body></html>

▶ Open the interactive comic issue

‹ Video · Controls · Poster · Tracks Plug-Ins · Object · Embed · Why They'Re Rare Now ›