From an AudioNode to numbers a renderer can use.

Signal path

Everything inside the dashed box runs on the audio thread with no per-frame allocation; one packet per FFT block crosses to the main thread with its buffers transferred, not copied.

Live demo

The real FrequencyAnalyserProcessor, loaded from lib/worklet.js (the package's worklet entry bundled into one file), analysing audio in this tab. Nothing leaves the page.

This browser does not expose AudioWorklet, so the live demo cannot run here. The offline demo below uses the same maths without it.

Wiring, as the page does it

const context = new AudioContext();
await context.audioWorklet.addModule('./lib/worklet.js'); // audio-reactive/worklet, bundled
const node = new AudioWorkletNode(context, 'frequency-analyser', {
  numberOfInputs: 1, numberOfOutputs: 1, outputChannelCount: [1],
  processorOptions: { fftSize: 1024, sampleRate: context.sampleRate, messageEvery: 1 },
});
source.connect(node);
node.connect(context.destination); // output is silence; keeps the node alive

node.port.onmessage = ({ data: packet }) => {
  const frequencyData = new Uint8Array(packet.frequencyData); // 512 bytes
  const waveformData = new Uint8Array(packet.waveformData);   // 1024 bytes
  const timeDomainData = new Float32Array(packet.timeDomainData);
  draw(packet.energy, packet.beatDetection, packet.harmonicPercussive, frequencyData);
  node.port.postMessage(
    { type: 'recycle-buffers', freq: [frequencyData.buffer], wave: [waveformData.buffer], timeDomain: [timeDomainData.buffer] },
    [frequencyData.buffer, waveformData.buffer, timeDomainData.buffer],
  );
};

Offline, no browser audio

The README's offline example, run by this page on load from lib/audio-reactive.js (the main entry). Two seconds of a 440 Hz sine at -20 dBFS with a 10 ms click every 500 ms, analysed block by block with the same functions the worklet uses. The same code runs under Bun or Node.

Frames 20–22, around the second click

…

The frame holding the click reads as broadband (flatness near 1, centroid near 11 kHz) and percussive (ratio near 1); the frames around it read as a tone near 440 Hz with a percussive ratio near 0.4.

import {
  analyseBlockBytes, buildHannWindow, buildTwiddleTable, createBeatTracker,
  createHarmonicPercussiveAnalyser, extractSpectralFeatures, getFrequencyBandLevels, getWeightedEnergy,
} from 'audio-reactive';

const window = buildHannWindow(fftSize);
const twiddles = buildTwiddleTable(fftSize);
const scratch = { real: new Float32Array(fftSize), imag: new Float32Array(fftSize) };
const spectrum = new Uint8Array(fftSize / 2);
const hpss = createHarmonicPercussiveAnalyser();
const beats = createBeatTracker();

for (let start = 0; start + fftSize <= samples.length; start += fftSize) {
  const block = samples.subarray(start, start + fftSize);
  analyseBlockBytes(block, window, twiddles, spectrum, scratch);
  const bands = getFrequencyBandLevels(spectrum, sampleRate);
  const energy = getWeightedEnergy(bands);
  const hp = hpss.analyse(spectrum, sampleRate);
  const beat = beats.update({ bands, weightedEnergy: energy, deltaMs: blockMs }, (start / sampleRate) * 1000);
}

API at a glance

Everything comes from audio-reactive except the processor, which is the audio-reactive/worklet entry. The README has the full table and every type.

Spectrum maths

Features and reactivity

Lifecycle and the worklet

Design notes

Condensed from the source docblocks; the README carries the long form.