Vue

Composables

Standalone Vue composables that wrap the core audio engines as refs.

The data pipelines are also available as Vue composables, if you want to drive your own rendering or combine them with mode="external". They wrap the framework-agnostic core audio engines and surface their state as refs.

useLocalAudio(options?)

Captures mic or display audio and runs the WASM FFT.

const {
  fftData,        // Ref<Uint8Array> — magnitudes 0–255
  isActive, sourceType, devices, activeDeviceId,
  getDevices,     // () => Promise<AudioDevice[]>
  start,          // (deviceId?) => Promise<void>  — microphone
  startDisplay,   // () => Promise<void>           — tab/system audio
  stop
} = useLocalAudio({ fftSize: 2048, bins: 80, startFreq: 100, endFreq: 18000 })

useWebSocketFft(options?)

Connects to a WebSocket that streams raw PCM and computes the FFT in-browser via WASM (distinct from the component's websocket mode, which expects pre-computed FFT — see WebSocket protocol). Feed its fftData into the component with mode="external".

const {
  fftData, fftDataLeft, fftDataRight, isConnected,
  connect,        // (url) => void
  disconnect,
  processSamples  // (Float32Array) => void — feed PCM manually
} = useWebSocketFft({ fftSize: 2048, bins: 80, overlap: 0.5, autoReconnect: true })

The raw WASM FFT processor is also exported from fft-visualizer-vue/wasm for direct use (re-exported from fft-visualizer-core/wasm).

Copyright © 2026