Features

Everything that powers the System Audio Visualizer experience, from audio capture to GPU rendering.

1

System Audio Capture

Capture audio directly from any screen, window, or browser tab using the Screen Capture API. No microphone needed, no downloads required. The audio stream is processed entirely in your browser for maximum privacy.

  • Uses getDisplayMedia API for secure audio access
  • Works with any audio source: streaming services, local files, video calls
  • Video track is immediately stopped to minimize resource usage
  • Automatic cleanup when the user stops sharing
2

Real-Time FFT Analysis

The Web Audio API AnalyserNode performs Fast Fourier Transform analysis on every audio frame, extracting detailed frequency spectrum data, waveform shapes, and amplitude levels in real time.

  • 1024-point FFT for 512 frequency bins of resolution
  • Separate extraction of bass, mid, and treble energy bands
  • Configurable smoothing for stable, visually pleasing output
  • Beat detection via low-frequency peak analysis with cooldown
3

GPU-Accelerated Rendering

All visualizations are rendered using WebGL through Three.js, with custom GLSL shaders that execute directly on the GPU. This ensures smooth 60fps performance even with complex effects.

  • Custom vertex and fragment shaders for each preset
  • Instanced rendering for particle and bar-based visualizations
  • Automatic pixel ratio handling for sharp rendering on HiDPI displays
  • Efficient typed array data transfer between CPU and GPU
4

Six Unique Presets

Choose from six handcrafted visualization styles, each responding to different aspects of your audio signal. Switch instantly between presets without interrupting audio capture.

  • Neon Spectrum Bars: Classic frequency display with neon glow
  • Circular Pulse Ring: Concentric rings driven by bass energy
  • Particle Galaxy: Thousands of GPU particles in orbital motion
  • Audio Tunnel: Raymarched 3D tunnel pulsing with music
  • Bass Shockwave: Explosive geometry triggered by beat detection
  • Liquid Shader Field: Organic noise-based fluid shader
5

Intelligent Beat Detection

The audio engine analyzes low-frequency energy peaks to detect beats in real time. When a beat is detected, presets trigger visual bursts, shockwaves, or color flashes synchronized perfectly to the rhythm.

  • Adaptive threshold based on rolling bass energy
  • Configurable cooldown prevents false positives
  • Smooth decay curves for natural visual response
  • Works across genres from EDM to classical
6

Color Themes

Five curated color palettes transform the mood of every visualization. Each theme provides a primary, secondary, accent, and background color that are automatically applied to all shader uniforms.

  • Cyberpunk: Neon purple, electric blue, and magenta
  • Ocean: Deep blue, teal, and aqua tones
  • Fire: Orange, red, and amber gradients
  • Matrix: Green and emerald digital aesthetic
  • Aurora: Teal and purple northern lights palette
7

Built-In Video Recording

Record your visualization sessions directly from the browser using the MediaRecorder API. The canvas output is captured as a WebM video file that downloads automatically when you stop recording.

  • Captures canvas at 30fps for smooth playback
  • Uses VP9 codec for efficient compression
  • One-click start and stop with visual indicator
  • Automatic file download on recording completion
8

Adjustable Controls

Fine-tune the audio-visual experience with sensitivity and intensity sliders. Sensitivity controls how much the visualization reacts to audio, while intensity scales the overall brightness and effect strength.

  • Sensitivity range: 0.1x to 3.0x audio reactivity
  • Intensity range: 0.1x to 2.0x visual strength
  • Real-time adjustment without pausing the visualization
  • Settings persist during the current session

Ready to Try It?

No sign-up required. Just open the visualizer and share your audio.