Auto pan

Moves the sound with a slow oscillator. In Pan mode it moves from one speaker to the other. In Tremolo mode its level goes up and down. 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/auto-pan

Controls

Panel

The panel draws the movement over two seconds. autoPanWave(shape, phase) is the wave and autoPanSweep(state) is what the panel draws.

Copy
import { AutoPanPanel } from "@/components/audio-ui/devices/auto-pan/panel";
import { autoPanDevice } from "@/components/audio-ui/devices/auto-pan/device";

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

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

Engine

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

One oscillator feeds both a stereo panner and a gain, and the mode sets which of the two depths is on. In Tremolo mode the level swings around the middle of its range, so a depth of 100 % goes from silence to full level.