Getting Started
Data modes
The three ways to get audio data into the visualizer — local, WebSocket, and external.
The component has one job — render a spectrum — and three ways to get the data, selected
with the mode prop.
| Mode | How data arrives | Use when |
|---|---|---|
local | Captures mic or display audio and computes the FFT in-browser (Rust/WASM) | You want a zero-backend, client-side visualizer |
websocket (default) | Connects to websocketUrl and reads pre-computed FFT frames | A server/device already produces FFT data (e.g. a Raspberry Pi) |
external | You pass FFT magnitudes via the data / dataLeft / dataRight props | You have your own audio pipeline (Web Audio, another analyser, etc.) |
Local mode
<FFTVisualizer mode="local" audio-source="mic" :bands="80" />
Set audio-source="display" to capture tab/system audio via screen sharing instead of the
microphone.
WebSocket mode
<FFTVisualizer
mode="websocket"
websocket-url="wss://your-server/fft"
:bands="40"
:auto-reconnect="true"
/>
The server streams a small config message then binary FFT frames — see the
WebSocket protocol guide. Reference servers
for Python, Node.js and Rust are in the repository's backend-examples/.
On an HTTPS page you must use a
wss:// URL — browsers block insecure ws:// from
secure pages as mixed content.External mode
Pass a Uint8Array of magnitudes (0–255); update it and the visual follows. For stereo,
pass dataLeft and dataRight instead of data.
<script setup>
import { ref } from 'vue'
import { FFTVisualizer } from 'vue-fft-visualizer'
const data = ref(new Uint8Array(80))
// ...fill data.value from your own analyser each frame
</script>
<template>
<FFTVisualizer mode="external" :data="data" :bands="40" />
</template>
The
data prop is watched by reference. If you mutate the same Uint8Array in place
each frame, Vue won't detect the change — either assign a fresh array, or call the exposed
feedData() method (which copies the data). See Events & methods.