I’ve always been fascinated by the intersection of audio and visuals. There’s something mesmerizing about seeing sound represented as light and motion. This post walks through how I built a real-time music visualizer that runs entirely in the browser.

The Stack

  • Rust for performance-critical audio processing
  • WebAssembly to run Rust in the browser
  • WebGPU for hardware-accelerated rendering
  • FFT (Fast Fourier Transform) to convert time-domain audio to frequency data

Why Rust?

Audio processing requires consistent performance. Dropouts in a visualizer are immediately noticeable and jarring. Rust gives us:

  • Zero-cost abstractions
  • Predictable performance without GC pauses
  • Easy WebAssembly compilation

The FFT Pipeline

The core of any visualizer is the FFT. Here’s the basic flow:

  1. Capture audio stream from microphone or file
  2. Buffer samples in chunks (usually 2048 or 4096)
  3. Apply windowing function to reduce spectral leakage
  4. Run FFT to get frequency bins
  5. Map bins to visual bars or particles

WebGPU Rendering

WebGPU is the modern successor to WebGL. It provides lower overhead and better access to GPU compute capabilities. For the visualizer, I use compute shaders to process the FFT data and render shaders to draw the bars.

Performance Notes

Running at 60fps with 2048-sample FFT:

  • CPU usage: ~5% on a modern laptop
  • GPU usage: ~15%
  • Memory: ~50MB

The key is keeping data transfers between CPU and GPU minimal. Once the audio data is in a GPU buffer, everything stays there.

Try It Out

You can see the visualizer in action at music.uvx.dev or check out the code on GitHub.