Real-time graphics
WaveScope
A browser music visualizer built with WebGPU, Web Audio, and Canvas.
What it is
WaveScope is a music visualizer that runs entirely in the browser. It has 34 modes: Canvas visualizers, 17 WebGPU shaders, and MilkDrop presets rendered with Butterchurn and projectM. It requires no server or account and can be installed as a PWA.
How it works
Each frame, the app writes a 1024-bin FFT and a 2048-sample waveform to GPU textures. Every shader reads the same textures, so adding a mode mostly means writing a new shader.
Spotify Connect provides playback controls and now-playing information through Authorization Code with PKCE. The visualizer still uses system audio because Spotify does not expose the audio stream.
Browser compatibility
Browser and shader compatibility took the most work. WebGPU bind groups must be managed explicitly, and neither WGSL shaders nor MilkDrop presets are fully validated at build time. Service-worker caching also caused a deployment bug — during a deploy, the worker briefly cached an HTML fallback in place of engine files — so the worker now refuses to cache HTML for anything except page navigations.
Status
Live at wavescope.signalridgelabs.com, source on GitHub. A native Windows counterpart — SpectraViz — is in development.