useWebAudioMixer

$ pnpm dlx shadcn@latest add @audiocn/use-web-audio-mixer

UsageCopy Anchor Link

const mixer = useMixer({
  channels: [{ id: "mic" }, { id: "music", monitor: true }],
});
const microphone = useMicrophone({ enabled: true });
const player = useAudioPlayer({ src: "/music.mp3" });

const graph = useWebAudioMixer(mixer, {
  inputs: { mic: microphone.stream, music: player.element },
  ducking: { trigger: "mic", targets: ["music"] },
});

<LevelMeter source={graph.meters.mic} />;
<LevelMeter source={graph.master.meter} />;

The System Audio Mixer block is built on it.

The graphCopy Anchor Link

Each channel runs through a gain, a ducking stage and a stereo panner. The panner feeds the master bus, and a monitor send feeds the speakers. The master bus runs through an optional peak limiter into a MediaStream for recording.

input → gain → duck → pan ─┬─→ master → limiter → output stream
                           └─→ monitor send → speakers

• Mute and solo are gain ramps, so they never click.
• monitor decides whether a channel is heard in the speakers. It is off by default so a microphone does not feed back; turn it on for music and sounds.
• A media element used as an input is taken over by the mixer while mounted, and routed back to the speakers afterwards.

OptionsCopy Anchor Link

ReturnsCopy Anchor Link

The sources stay the same while the graph is rebuilt, so components never need to resubscribe.