#1

Autoplay the theme song, with a pause toggle

Openbjarneowants to merge intofrom

The page now plays "We Can Fix Everything" by Ryan R. Hughes on load, with a deliberately quiet pause toggle in the bottom-right corner.

The audio

Streamed straight from the Omarchy station, so nothing is vendored into the repo:

https://radio.cliamp.stream/omarchy/tracks/0a7974d4554686ef

Picked out of https://radio.cliamp.stream/omarchy/tracks. That endpoint sends Access-Control-Allow-Origin: * and Accept-Ranges: bytes, so a plain cross-origin <audio> element streams and seeks it without a proxy.

preload="metadata" rather than auto: the file is 6.7 MB, and there is no reason to pull all of it for a visitor whose browser refuses autoplay and who never clicks. play() starts the progressive download when playback actually begins.

About "autoplay"

Chrome, Safari and Firefox all refuse audible autoplay until the visitor has some interaction history with the site, so the autoplay attribute alone is a coin flip. play() is attempted on load; when the promise is rejected, one-shot listeners for pointerdown, keydown and touchstart start playback on the first real gesture instead. Those listeners skip events on the toggle itself, so they cannot race its own click handler, and they are torn down once playback begins.

Practical upshot: first-time visitors will usually hear it from their first click anywhere on the page, not from load.

The toggle

Fixed in the bottom-right, --dim from the existing Tokyo Night palette, going --cyan on hover. One button, two glyphs, showing whichever action the next click performs (playing, then paused):

  • Inline SVG rather than a glyph, so it does not depend on the webfont loading.
  • aria-label flips between "Pause the music" and "Play the music"; the track credit lives in title.
  • hidden in the markup and unhidden by the script, so with JavaScript off nobody is shown a dead control. The autoplay attribute still applies there.
  • :focus-visible outline, and hover is behind @media (hover: hover), matching how the existing link is styled.

No loop: when the track ends the toggle goes back to play.

card.html is untouched, since it exists only as the screenshot source for the social card.