Filter

Takes part of the spectrum out: a low-pass, a high-pass, a band-pass or a notch. It is a device: a state, a panel, an engine and tools, each its own file.

Installation

bunnpmpnpmyarn
Copy
pnpm dlx shadcn@latest add @audio-ui/filter

Controls

Panel

The panel draws the curve of the filter, with a handle on it. Pass a spectrum to the panel to see what comes out behind the curve. filterCurve(state) is the curve it draws.

Copy
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} />;

Engine

Create it, connect it and update it as for any device: see The engine.

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. filterSettings(state) is what goes on the node.