Scroll-Linked Audio Waveform Scrub — Free Reverse-Scrub Player Effect

Most audio players work one way: time advances, and the playhead moves to match it. This snippet inverts that relationship — there's no clock running at all. The playhead's horizontal position is a direct, continuous function of how far you've scrolled through the section, so scrolling *is* scrubbing. It's built with plain vanilla JavaScript reading getBoundingClientRect() on scroll, no GSAP or audio library required.

A visual waveform, not an audio file

The bars are drawn once on load from a small deterministic formula — a sum of sine waves plus a stable pseudo-random jitter seeded with a fixed number — so the shape looks like a real recording's amplitude but never needs an actual audio asset to fetch or decode. If you do want real playback, the same progress value can drive audio.currentTime = progress * audio.duration on an HTMLAudioElement instead of just moving a marker.

Scroll position as the single source of truth

A tall wrapper section (340vh) gives the page room to scroll while a sticky inner panel stays pinned in the viewport. On every scroll event (throttled to one calculation per animation frame with a requestAnimationFrame guard flag), the code measures the wrapper's getBoundingClientRect() and divides the distance already scrolled by the total scrollable distance, clamped to 0–1. That single progress number positions the playhead, sizes the "played" overlay, updates the displayed time label, and marks which bars are already "played" — all four effects derive from the same measurement, so they never drift out of sync with each other.

Fully reversible, no state to reset

Because the playhead position is recalculated fresh from the current scroll offset on every frame rather than accumulated or eased toward a target, scrolling back up moves it back exactly, instantly, with no springy catch-up and no need to detect "reverse" as a special case. Whatever fraction of the section is scrolled is exactly the fraction of the track that's "played."

Cheap enough for a plain scroll listener

The update touches only style.left, style.width, and textContent — no layout-triggering reads inside the loop beyond the one getBoundingClientRect() call — so a passive scroll listener gated by requestAnimationFrame keeps this smooth without needing IntersectionObserver or a scroll-linked animation library.

Customizing it

Swap the synthetic waveform for real amplitude data decoded from an actual audio file via the Web Audio API's AnalyserNode, wire the same progress value to audio.currentTime, or change the wrapper height to make the scrub longer or shorter relative to scroll distance. Pair it with a scroll-driven progress bar or a scroll SVG path draw for other position-linked reveals.