Reference
Props, events & methods
The complete component API — every prop, event, exposed method, and slot.
Props
Data source
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'websocket' | 'local' | 'external' | 'websocket' | Where FFT data comes from |
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
| Prop | Type | Default | Description |
|---|---|---|---|
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
| Prop | Type | Default | Description |
|---|---|---|---|
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 |
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) |
showStats | boolean | true | Show the small connection/fps overlay (overridable via the stats slot) |
debug | boolean | false | Log connection/config diagnostics to the console |
Events
| Event | Payload | Description |
|---|---|---|
connected | — | Data source became active |
disconnected | — | Data source stopped |
error | string | Error message (WS error, capture failure, WebGL init failure) |
Exposed methods
Access via a template ref:
<script setup>
import { ref } from 'vue'
const viz = ref()
// Manual connection control
viz.value.connect()
viz.value.disconnect()
viz.value.isConnected // Ref<boolean>
// Feed FFT frames imperatively (mode="external") — copies the data, so it works
// even when you reuse one buffer each frame (unlike the reference-watched `data` prop)
viz.value.feedData(mono) // Uint8Array
viz.value.feedData(mono, left, right) // stereo
// Local-audio device management
await viz.value.getAudioDevices() // Promise<AudioDevice[]> (prompts for mic permission)
viz.value.audioDevices // Ref<AudioDevice[]>
viz.value.activeAudioDeviceId // Ref<string | undefined>
</script>
<template>
<FFTVisualizer ref="viz" mode="local" />
</template>
Slots
| Slot | Props | Description |
|---|---|---|
stats | { connected, bands, fps } | Replace the default corner overlay with your own (only rendered when showStats is true) |