Introduction
FFT Visualizer (vue-fft-visualizer) is a high-performance, WebGL-based real-time
audio spectrum analyzer and FFT visualizer component for Vue 3.
The entire visual — bars, LED segments, radial layout, gradient, glow, reflection — is drawn by a single fragment shader in one GPU draw call, so it stays smooth even at 120 fps with 80 bands in stereo.
Highlights
- WebGL fragment-shader rendering — the whole spectrum is one draw call; no per-bar canvas ops.
- Three data sources — capture audio locally (mic or tab/system), stream pre-computed FFT over WebSocket, or feed your own data via props.
- In-browser FFT — optional Rust/WASM FFT processor, lazy-loaded only when you capture audio locally.
- Rich visual modes — LED segments (two styles), radial, stereo, mirrored reflection, glow, rotation, per-level or per-axis coloring.
- Flexible gradients — 10 built-in presets or custom stops in any CSS color format.
- One peer dependency — just Vue 3; rendering uses native WebGL.
- SSR-safe — all browser access is deferred to
onMounted; works with Nuxt via<ClientOnly>.
Why this instead of a canvas visualizer?
Most spectrum visualizers (e.g. audioMotion-analyzer) draw to a 2D canvas. FFT Visualizer renders the entire frame — every bar, LED gap, gradient, glow and reflection — in a single WebGL fragment shader / draw call, which keeps it cheap at high band counts and frame rates.
It also ships a WebSocket remote-FFT protocol with reference servers (Python, Node.js, Rust), so the FFT can run on a separate device — a Raspberry Pi, a media server — and the browser only draws. That's a case canvas visualizers don't cover.
Browser support
Requires WebGL (all modern browsers): Chrome 56+, Firefox 51+, Safari 15+, Edge 79+.
Local capture additionally needs getUserMedia / getDisplayMedia.