Guide
Options
The canonical option reference — every visualizer option, its type, default, and meaning.
Every package configures the same set of options — the framework-agnostic
FFTVisualizerOptions. This page is the single source of truth for what each one means;
the Core API and Vue props pages link back here for descriptions.
How you pass them differs by package: Core takes an options object in the constructor and
setOptions() ({ ledBars: true }); Vue takes them as props in camelCase or kebab-case
(:led-bars="true"). The names and meanings below are identical either way.Data source
| Option | Type | Default | Meaning |
|---|---|---|---|
mode | 'websocket' | 'local' | 'external' | 'websocket' | Where FFT data comes from — see Data modes |
websocketUrl | string | — | WebSocket URL (used when mode: 'websocket') |
data | Uint8Array | — | External FFT magnitudes, mono (mode: 'external') |
dataLeft / dataRight | Uint8Array | — | External FFT magnitudes per channel (stereo external mode) |
audioSource | 'mic' | 'display' | 'mic' | Local capture source (mode: 'local') |
audioDeviceId | string | — | Specific input device for local mic capture |
autoReconnect | boolean | false | Reconnect the WebSocket with exponential backoff (1s→30s) after an unexpected drop |
Data processing
| Option | Type | Default | Meaning |
|---|---|---|---|
bands | 10 | 20 | 40 | 80 | 80 | Number of frequency bands displayed |
noiseFloor | number | 0 | Cut magnitudes below this threshold (0–255) |
smoothing | number | 0 | Temporal smoothing (0 = none, 0.9 = heavy) |
showPeaks | boolean | true | Show falling peak indicators |
peakDecay | number | 0.997 | Peak fall speed (0.99 = slow, 0.9 = fast) |
stereo | boolean | false | Stereo mode: left channel top, right channel bottom |
Appearance
| Option | Type | Default | Meaning |
|---|---|---|---|
ledBars | boolean | false | LED segment effect |
ledShape | 'segment' | 'meter' | 'segment' | segment = fixed-pixel gap lines; meter = short, wide segments like a classic LED meter |
lumiBars | boolean | false | Full-height bars whose brightness follows the level |
radial | boolean | false | Circular spectrum: angle = frequency, radius = level |
radialInnerRadius | number | 0.35 | Radial: inner hole radius as a fraction of outer radius (0–0.9) |
barSpace | number | 0.25 | Gap between bars as a fraction of bar width (0–0.9) |
reflexRatio | number | 0 | Mirrored reflection (0 = off). Linear mono: fraction of height (max 0.7). Radial: > 0 mirrors bars inward |
reflexAlpha | number | 0.25 | Reflection brightness (0–1) |
glow | number | 0 | Glow above the bar tops (0 = off, 1 = max) |
rotation | 0 | 90 | 180 | 270 | 0 | Rotate the whole visual clockwise, in degrees |
gradient | GradientName | GradientStop[] | 'classic' | Bar colors: a preset name or custom stops — see Gradients |
gradientDirection | 'vertical' | 'horizontal' | 'vertical' | Gradient axis |
colorMode | 'gradient' | 'bar-level' | 'gradient' | bar-level colors each whole bar by its current level |
background | string | '#0a0a0a' | Background behind/between bars. Any CSS color, incl. 'transparent' / rgba(…) (fixed at mount) |
debug | boolean | false | Log connection/config diagnostics to the console |
The Vue wrapper adds one Vue-only prop,
showStats, for its built-in connection/fps
overlay — documented in Vue props.