useSound

$ pnpm dlx shadcn@latest add @audiocn/use-sound

UsageCopy Anchor Link

const ding = useSound("/sounds/ding.mp3", { volume: 0.8 });

<Button onClick={ding.play}>Ding</Button>;

The sound is fetched and decoded once per page, then plays instantly on every trigger. src can also be an AudioBuffer you made yourself.

RoutingCopy Anchor Link

By default a sound plays through the speakers. Pass destination: null and route output yourself, for example into a mixer channel:

const pad = useSound(src, { destination: null });
useWebAudioMixer(mixer, { inputs: { sounds: pad.output } });

OptionsCopy Anchor Link

ReturnsCopy Anchor Link

loadAudioBuffer(context, src) is exported for preloading.