usePolyphony

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

Copy
import { usePolyphony } from "@/hooks/use-polyphony";

Usage

The engine of an instrument device plays one voice. usePolyphony plays chords on it: it makes as many engines as notes sound at once into a destination, keeps every one following the state, and gives each note a voice of its own: the one that holds it, else a free one, else the one held longest, whose note is let go first. The engines are disposed when the destination changes and on unmount.

Copy
import { createPolySynthEngine } from "@/components/audio-ui/devices/poly-synth/engine";
import { PolySynthPanel } from "@/components/audio-ui/devices/poly-synth/panel";
import { useMasterBus } from "@/hooks/use-master-bus";
import { usePolyphony } from "@/hooks/use-polyphony";

const output = useMasterBus(1);
const { noteOff, noteOn } = usePolyphony({
  create: createPolySynthEngine,
  destination: output,
  state,
});

<PolySynthPanel
  onNoteOff={() => noteOff("panel")}
  onNoteOn={(note) => noteOn(note, "panel")}
  onValueChange={setState}
  value={state}
/>;

A note is named by an id its note off gives again, such as midi-60 for a key of a MIDI keyboard. To schedule notes ahead on the audio clock, or outside React, createPolyphony(engines) from @/lib/polyphony (installed with the hook) does the same with engines you made and connected: noteOn(note, id, at?), noteOff(id, at?) and release(at?). The arrangement's engine plays a MIDI track's instrument this way.