Autoplay the theme song, with a pause toggle - #1
Open
bjarneo wants to merge 1 commit into
Open
Conversation
Streams "We Can Fix Everything" by Ryan R. Hughes from the Omarchy station, so nothing is vendored into the repo. The endpoint sends CORS and range headers, so a plain cross-origin <audio> element handles it. Browsers refuse audible autoplay until the visitor has interacted with the page, so play() is attempted on load and, when refused, retried on the first click, keypress or tap. A dim pause toggle sits in the bottom-right corner, hidden until the script unhides it so no-JS visitors never see a dead control.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Picked out of
https://radio.cliamp.stream/omarchy/tracks. That endpoint sendsAccess-Control-Allow-Origin: *andAccept-Ranges: bytes, so a plaincross-origin
<audio>element streams and seeks it without a proxy.preload="metadata"rather thanauto: the file is 6.7 MB, and there is noreason to pull all of it for a visitor whose browser refuses autoplay and who
never clicks.
play()starts the progressive download when playback actuallybegins.
About "autoplay"
Chrome, Safari and Firefox all refuse audible autoplay until the visitor has
some interaction history with the site, so the
autoplayattribute alone is acoin flip.
play()is attempted on load; when the promise is rejected, one-shotlisteners for
pointerdown,keydownandtouchstartstart playback on thefirst 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,
--dimfrom the existing Tokyo Night palette, going--cyanon hover. One button, two glyphs, showing whichever action the nextclick performs (playing, then paused):
aria-labelflips between "Pause the music" and "Play the music"; the trackcredit lives in
title.hiddenin the markup and unhidden by the script, so with JavaScript offnobody is shown a dead control. The
autoplayattribute still applies there.:focus-visibleoutline, and hover is behind@media (hover: hover), matchinghow the existing link is styled.
No loop: when the track ends the toggle goes back to play.
card.htmlis untouched, since it exists only as the screenshot source for thesocial card.