Components
Time and sequencing
Blocks
A filter as a device you can plug in: a type, a cutoff and a resonance as a state, a panel with a handle on the curve and a live spectrum, a Web Audio engine and the tools an agent drives it with.
Audio UI
"use client";
import { useState } from "react";Takes part of the spectrum out: a low-pass, high-pass, band-pass or notch. Drag the handle on the curve across for the cutoff and up for the resonance; pass a spectrum to the panel to see what comes out behind it. It is a device like the compressor: a state, a panel that draws it, an engine that plays it and tools an agent calls, each its own file.
import { FilterPanel } from "@/components/audio-ui/devices/filter/panel";
import { filterDevice } from "@/components/audio-ui/devices/filter/device";
const [state, setState] = useState(() => filterDevice.defaults());
<FilterPanel onValueChange={setState} value={state} />;The state is a plain object keyed by parameter id, so a host stores it, saves it with its project and sends it where it likes. filterCurve(state) is the curve the panel draws and filterSettings(state) what goes on the node.
import { createFilterEngine } from "@/components/audio-ui/devices/filter/engine";
const engine = createFilterEngine(ctx, state);
source.connect(engine.input);
engine.output.connect(ctx.destination);
engine.update(nextState); // parameters ramp: no click
engine.dispose();The node is the filter the curve draws. A low-pass and a high-pass read their resonance in decibels, so the device gives it to the node in that unit, and the curve and the sound agree.
import { deviceTools } from "@audio-ui/core/device";
import { filterDevice } from "@/components/audio-ui/devices/filter/device";
const [set, reset] = deviceTools(filterDevice);set and reset change the state, with the ranges the device enforces: a value out of range is brought in and reported, a wrong one is refused by name, and a call never throws.
Every control is a native input: the knobs are sliders named after their parameter, with the value and unit as the text value, the switch is a toggle button, and everything takes the keyboard.