Put it on your site

One small script and one tag. It reads your newest earworm straight from your Bluesky account, so it changes by itself when you set a new one.

The short version

<script type="module" src="https://latestearworm.com/embed.js"></script>
<latest-earworm handle="you.bsky.social"></latest-earworm>

If you are signed in, your own page has this ready to copy with your handle filled in.

What it looks like

This is the real thing, restyled to match this site:

Nothing to show right now.

Options

Attribute	What it does
`handle`	The Bluesky handle whose earworm to show.
`did`	The account’s permanent ID, in place of `handle`. It saves one lookup and keeps working if the handle changes.
`show-expired`	Keep showing the last earworm after it is more than a week old. Without this, the element shows nothing once the earworm expires.
`player`	Add a play button. The music service’s player loads only when someone presses it.

Anything you put inside the tag is shown when there is no earworm to display:

<latest-earworm handle="you.bsky.social">
  Nothing stuck in my head right now.
</latest-earworm>

Making it match your site

It takes its font and text colour from the page around it. These custom properties change the rest:

Property	Changes
`--earworm-accent`	Link colour and the bar beside the note
`--earworm-background`	Card background
`--earworm-color`	Text colour
`--earworm-border`	Card border, for example `2px solid black`
`--earworm-radius`	Corner rounding
`--earworm-padding`, `--earworm-gap`	Spacing
`--earworm-art-size`	Size of the cover artwork

For anything else, each piece can be styled by name with ::part(). The names are card, art, body, label, track, artist, note, player, button, frame, links, link and credit.

latest-earworm {
  --earworm-accent: crimson;
  --earworm-radius: 0;
}
latest-earworm::part(track) {
  font-size: 1.5rem;
}

Without the component

Earworms are public records, so you can read one yourself with three requests and build whatever you like, in the browser or when your site is built.

Turn the handle into an account ID:
https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=HANDLE
Find the account’s server, listed as #atproto_pds:
https://plc.directory/ACCOUNT_ID
Ask that server for the newest earworm:
SERVER/xrpc/com.atproto.repo.listRecords?repo=ACCOUNT_ID&collection=com.latestearworm.earworm&limit=1

Each record has trackName, artists, links and createdAt, and may have releaseName, artworkUrl, note and post. A record is whatever its owner saved, so treat every field as untrusted text and check that links start with https://.

Good to know

The script is about 9 kB and has no tracking.
It works with keyboards and screen readers, and follows your page’s light or dark colours.