useAudioContext

Browsers only let audio start after the user interacts with the page. Every audiocn Web Audio hook shares one AudioContext, and this hook resumes it on the first click, tap or key press.

On browsers that expose navigator.audioSession (including Safari on iOS 16.4 and later), the first gesture or resume() call changes its default auto type to playback, even if the context is already running. This requests playback routing so Web Audio can play with iPhone Silent Mode enabled. Browsers without this API, or those that reject the setting, keep their native behavior and may still require Silent Mode to be off.

The setting affects all audio on the page and can pause other playback on the device or change microphone routing. audiocn leaves explicitly selected types, including ambient and play-and-record, unchanged. Apps that need mixing or microphone capture should select their own session type before interacting with audio controls.

$ pnpm dlx shadcn@latest add @audiocn-solid/use-audio-context

UsageCopy Anchor Link

const { context, status, resume } = useAudioContext();

if (status === "suspended") {
  return <Button onClick={resume}>Enable audio</Button>;
}

Your own contextCopy Anchor Link

Wrap your app in AudioContextProvider to make every hook use a context you created, for example one with a specific sample rate. destination routes Knob click sounds through a node in your audio graph instead of the speakers.

const context = new AudioContext({ sampleRate: 48_000 });
const effectsBus = context.createGain();
effectsBus.connect(context.destination);

<AudioContextProvider context={context} destination={effectsBus}>
  <App />
</AudioContextProvider>;

ReturnsCopy Anchor Link