Wave shaper

Two detuned oscillators, a distortion mixed in with the clean sound, and a low-pass filter. Press the pad: the pitch goes across and the resonance goes up. 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/wave-shaper

Controls

Panel

The panel has a pad that plays the synth: the pitch goes across and the resonance goes up. waveShaperPitch(position) and waveShaperResonance(position) turn a position from 0 to 1 into a note.

Copy
import { WaveShaperPanel } from "@/components/audio-ui/devices/wave-shaper/panel";
import { waveShaperDevice } from "@/components/audio-ui/devices/wave-shaper/device";

const [state, setState] = useState(() => waveShaperDevice.defaults());

<WaveShaperPanel onValueChange={setState} value={state} />;

Engine

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

Copy
engine.noteOn(note); // starts a note, or glides the one being held
engine.noteOff(); // lets it go

One voice at a time, as the pocket synth. The distortion curve is a table of 44,100 points, rebuilt only when the drive changes. The shaper oversamples 4x, which delays its path by 4 ms, and the clean path waits as long so the mix does not comb.