---
title: "Composables"
description: "Standalone Vue composables that wrap the core audio engines as refs."
canonical_url: "https://www.fftvisualizer.com/vue/composables"
---
# 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](https://www.fftvisualizer.com/core/audio-engines) and surface their state as refs.

## `useLocalAudio(options?)`

Captures mic or display audio and runs the WASM FFT.

```ts
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](https://www.fftvisualizer.com/guide/websocket-protocol)). Feed its `fftData` into the component with
`mode="external"`.

```ts
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`](https://www.fftvisualizer.com/core/audio-engines#raw-wasm-processor)).


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.