web-audio

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

Copy
import { WebAudio, webAudio } from "@/lib/web-audio";

Usage

A page has one AudioContext, shared by every hook and engine on it, made the first time something asks for it. Ask for it where you need it:

Copy
import { webAudio } from "@/lib/web-audio";

const ctx = webAudio.getContext(); // null on the server

To make it with options of its own, such as how much latency it trades for steadiness, configure it before anything asks for it. They do not change a context already made, so a change takes the next page load:

Copy
webAudio.configure({ latencyHint: "playback" });

Browsers start a context suspended until the user does something on the page. webAudio.resume() gives the context and resumes it unless it already runs: call it from the gesture that starts the sound, such as a play button, a pad struck or a MIDI note, without waiting for it, so the note starts on the press.

Copy
const play = () => {
  webAudio.resume();
  transport.play();
};

Where a context comes from is one rule. An engine or a lib takes it as a parameter (createDelayEngine(ctx, state)), so it also renders on an OfflineAudioContext. A hook given a node (a destination, an analyser) works on that node's context, the graph it plays into. Everything else, a block or a hook that starts sound from nothing, asks webAudio, and never makes a context of its own.