1. The Problem
99 artist cards on The DJ Calendar homepage
Users needed a way to preview music without clicking through to each artist page
Requirements: must work on hover AND touch, must be zero-dependency, must handle browser autoplay policy
2. The iTunes Search API — Free Audio
No audio hosting needed — Apple's 30-second previews are publicly accessible
entity=musicTrack&limit=12&media=music — grab the first result with a preview URL
Cache it on the card's data-preview-url so it's a one-time lookup per card
3. Web Audio API Analyser — Real EQ, Not a Fake
createMediaElementSource feeds real audio into an analyserNode
fftSize: 64, smoothing: 0.8 — 8 bars reading their own frequency bins
Canvas draws each frame from dataArray[i*2]
This is the key line: "This is not an animation pretending to be sound"
4. The Race Condition Guard
Sweep across cards fast and audio load, canvas draw, and mouseleave all race
Each card has a _djcPreviewGen counter
New hover bumps the counter, previous async callbacks check before touching DOM
Simple pattern, saves a ton of edge-case bugs
5. Consent-First Design — The "No" States
Touch devices (hover: none, pointer: coarse): tap toggles play/stop
Reduced motion (prefers-reduced-motion: reduce): no hover preview
Conflicting audio: card previews pause the favorites player, resume it
No preview found: data-preview-miss, silently skipped forever
Most hover widgets break on these — this one treats them as first-class
6. Extras That Come Free
document.title swaps to "Artist - Track" while playing
navigator.mediaSession for OS media controls
crossOrigin: anonymous makes the analyser legal on cross-origin audio
7. The Extraction — From Production to Repo
This code was running on thedjcalendar.com for months
Extracted verbatim into a standalone repo with a GitHub Pages demo
Same code, no build step, no framework — just a script tag and some HTML
8. Live Demo
bryanhamiltondev.github.io/dj-card-preview
David Guetta — Titanium — click once, hover the card, hear it play
9. Sibling Repos
eq-visualizer — the decorative pure-CSS EQ
next-show-radar — the consent-first tour map
Top comments (0)