WebGL Audio Spectrum Analyzer for the Web

It is a high-performance, WebGL-based audio spectrum analyzer and FFT visualizer for the web. It features a framework-agnostic TypeScript core with first-class Vue 3 and React components. The entire frame is drawn by a single fragment shader, allowing for smooth 120fps rendering with 80 bands in stereo.

Users can visualize microphone input, tab or system audio, WebSocket streams, or custom data fed via props. It supports multiple visual modes including LED segments, radial layout, stereo mirrored reflections, glow effects, and gradient presets. The tool optionally uses a Rust/WebAssembly FFT processor for local audio capture.

The framework-agnostic core is written in vanilla-TypeScript with thin wrappers for Vue and React. Rendering uses native WebGL without any charting library or canvas 2D. It is SSR-safe for Nuxt and allows any background color, including a fully transparent canvas that blends into the page.

The website explicitly states it runs entirely in the browser with no backend required. It is available as open-source software. Users can get started by viewing the live demo or checking the GitHub repository.

Some reviewers praise the ability to capture audio locally, stream pre-computed FFT over WebSocket, or feed their own magnitudes via props. The single fragment shader approach is highlighted for its performance, achieving smooth 120fps with 80 bands in stereo.

The tool offers 10 gradient presets or allows users to define their own CSS-color stops. It also includes features like rotation, stereo mirrored reflections, and lazy-loading for the optional WebAssembly FFT processor.

The official website of WebGL Audio Spectrum Analyzer for the Web is fftvisualizer.com.

On Trustburn, WebGL Audio Spectrum Analyzer for the Web has a rating of 4.2 out of 5 based on 5 reviews.