Installation

fft-visualizer-core is the framework-agnostic engine: a plain TypeScript class that renders onto a <canvas> you provide. Use it directly in vanilla JS/TS, or as the foundation under a framework wrapper like fft-visualizer-vue.

Install

pnpm add fft-visualizer-core

npm install fft-visualizer-core

yarn add fft-visualizer-core

Quick start

The fastest way to see something is local mode — capture the microphone and visualize it entirely in the browser, no backend required. Give the class a <canvas> and an options object:

import { FFTVisualizer } from 'fft-visualizer-core'

const canvas = document.querySelector('canvas')!
const viz = new FFTVisualizer(canvas, {
  mode: 'local',
  bands: 40,
  gradient: 'aurora'
})

// later, when you're done:
viz.destroy()

The visualizer sizes itself to the canvas's parent element and observes it for layout changes, so give the container a height:

<div style="width: 100%; height: 240px">
  <canvas></canvas>
</div>

Construction connects automatically (local mode prompts for microphone permission). See the API reference for connect() / disconnect(), live option updates, events, and teardown.

Data modes

mode: 'local' is one of three ways to feed the visualizer — see Data modes for websocket (pre-computed FFT from a server) and external (your own magnitudes).