Audio Waveform

Create an audio player with a waveform progress bar. A compact player row: a round accent play/pause button beside a waveform strip of ~36 thin rounded bars whose heights come from DETERMINISTIC pseudo-random values (hash the bar index, e.g. fract(sin(i * 12.9898) * 43758.5453), so the waveform is identical every render, never Math.random). While playing, progress sweeps through the strip: bars at or before the playhead turn the accent color (background transition 200ms) while the rest stay hairline grey, and the 2-3 bars nearest the playhead dance (scaleY 1 → 1.6 → 1 on a 0.5s ease-in-out loop, transform-origin center). Time labels (elapsed / total, small monospace) sit under the strip. In production, derive bar heights from real audio peaks (decode with the Web Audio API) and drive progress from the audio element's timeupdate; clicking a bar seeks there. Accessibility: the button uses aria-pressed and swaps its label between Play and Pause; the waveform is decorative (aria-hidden) with progress conveyed by the time text. If prefers-reduced-motion is set, no dancing bars, color fill only. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.