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

<section class="as-intro"><h1>Scroll ↓</h1><p>Scrolling scrubs the playhead across the waveform — the reverse of a normal player.</p></section>
<section class="as-wrap" id="asWrap">
  <div class="as-panel">
    <div class="as-meta"><span class="as-track-name">Interview — Take 4</span><span class="as-time" id="asTime">0:00 / 3:24</span></div>
    <div class="as-scope">
      <div class="as-bars" id="asBars"></div>
      <div class="as-played" id="asPlayed"></div>
      <div class="as-playhead" id="asPlayhead"></div>
    </div>
    <div class="as-progress-track"><div class="as-progress-fill" id="asProgressFill"></div></div>
  </div>
</section>
<section class="as-outro"><p>Scroll back up — the playhead reverses exactly.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0b13;color:#fff}
.as-intro,.as-outro{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px}
.as-intro h1{font-size:clamp(34px,7vw,64px);letter-spacing:-.02em}
.as-intro p,.as-outro p{color:#9aa0b8;font-size:16px;max-width:480px}
.as-wrap{height:340vh;position:relative}
.as-panel{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:780px;margin:0 auto;padding:24px}
.as-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#9aa0b8}
.as-track-name{font-weight:700;color:#e6e8f4;letter-spacing:-.01em}
.as-time{font-variant-numeric:tabular-nums;color:#7c8cff;font-weight:700}
.as-scope{position:relative;height:180px;border-radius:18px;background:#0d0f1c;border:1px solid #232a3d;overflow:hidden;padding:0 4px}
.as-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;padding:0 4px}
.as-bars span{flex:1;min-width:2px;border-radius:2px;background:#2c3349;transition:background .15s}
.as-bars span.is-played{background:#4c56a8}
.as-played{position:absolute;top:0;left:0;bottom:0;width:0%;background:linear-gradient(90deg,rgba(124,140,255,.12),rgba(124,140,255,.02));pointer-events:none}
.as-playhead{position:absolute;top:6px;bottom:6px;left:0;width:2px;background:#22d3ee;box-shadow:0 0 14px rgba(34,211,238,.8);border-radius:2px}
.as-playhead::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.9)}
.as-progress-track{height:4px;border-radius:999px;background:#1b2032;overflow:hidden}
.as-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22d3ee)}

(function () {
  var wrap = document.getElementById('asWrap');
  var barsEl = document.getElementById('asBars');
  var playedEl = document.getElementById('asPlayed');
  var playhead = document.getElementById('asPlayhead');
  var timeEl = document.getElementById('asTime');
  var progressFill = document.getElementById('asProgressFill');
  var totalSeconds = 204; // 3:24, purely for the displayed time label

  // Build a deterministic pseudo-waveform (no audio file needed — this is a
  // visual stand-in). A sum of a few sine waves plus a stable pseudo-random
  // jitter gives it a natural, non-repeating look.
  var BAR_COUNT = 140;
  var seed = 42;
  function rand() {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  }
  var bars = [];
  for (var i = 0; i < BAR_COUNT; i++) {
    var t = i / BAR_COUNT;
    var h = 18 + Math.abs(Math.sin(t * 22) * 40) + Math.abs(Math.sin(t * 5.3) * 30) + rand() * 18;
    h = Math.min(96, h);
    var bar = document.createElement('span');
    bar.style.height = h.toFixed(1) + '%';
    barsEl.appendChild(bar);
    bars.push(bar);
  }

  function formatTime(s) {
    var m = Math.floor(s / 60);
    var sec = Math.floor(s % 60);
    return m + ':' + (sec < 10 ? '0' : '') + sec;
  }

  var ticking = false;
  function update() {
    ticking = false;
    var rect = wrap.getBoundingClientRect();
    var scrollable = rect.height - window.innerHeight;
    // Scroll position drives playhead position directly — this is the
    // inverse of a normal audio player, where time drives the playhead.
    var progress = scrollable > 0 ? (-rect.top) / scrollable : 0;
    progress = Math.max(0, Math.min(1, progress));

    playhead.style.left = (progress * 100) + '%';
    playedEl.style.width = (progress * 100) + '%';
    progressFill.style.width = (progress * 100) + '%';
    timeEl.textContent = formatTime(progress * totalSeconds) + ' / ' + formatTime(totalSeconds);

    var playedCount = Math.round(progress * BAR_COUNT);
    for (var i = 0; i < bars.length; i++) {
      if (i < playedCount) bars[i].classList.add('is-played');
      else bars[i].classList.remove('is-played');
    }
  }
  function onScroll() {
    if (!ticking) {
      ticking = true;
      requestAnimationFrame(update);
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll);
  update();
})();