Lo-fi

Ages the sound like a worn tape or a record. Its pitch drifts and wobbles, a hiss and the crackle of dust ride under it, its band narrows and a tape drive saturates it. 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/lofi

Controls

Each control at 0 takes its part out. There is no mix: the drift and the wobble delay the sound by a couple of milliseconds, and mixing it with the clean sound would comb it.

Panel

The panel draws the band the high-pass and the low-pass leave. lofiCurve(state) is the curve it draws: the kernel's three one-pole low-passes in a row and its one-pole high-pass.

Copy
import { LofiPanel } from "@/components/audio-ui/devices/lofi/panel";
import { lofiDevice } from "@/components/audio-ui/devices/lofi/device";

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

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

Engine

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

The lo-fi is the kernel of @audio/effect-lofi in an AudioWorklet loaded from a blob (LOFI_WORKLET is its source), 128 frames at a time, each channel with a noise of its own. A worklet cannot import, so the device carries the kernel as published (LOFI_KERNELS, in its kernels.ts). Until it is ready, and when it is off, the sound passes clean, and engine.ready resolves to false in a context that cannot run worklets. Its hiss and crackle play on through silence, as a record's do.