Mixer

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/mixer

UsageCopy Anchor Link

import {
  Mixer,
  MixerChannels,
  MixerHeader,
  MixerMaster,
  MixerTitle,
} from "@/components/ui/mixer";

<Mixer orientation="vertical">
  <MixerHeader>
    <MixerTitle>Audio mixer</MixerTitle>
  </MixerHeader>
  <MixerChannels>
    {channels.map((channel) => (
      <ChannelStrip key={channel.id}>…</ChannelStrip>
    ))}
  </MixerChannels>
  <MixerSeparator />
  <MixerMaster>
    <ChannelStrip variant="master">…</ChannelStrip>
  </MixerMaster>
</Mixer>

The mixer holds no audio and no state. Pair it with useMixer for state and useWebAudioMixer for sound, or with your own engine.

AnatomyCopy Anchor Link

<Mixer>
  <MixerHeader>
    <MixerTitle />
    <MixerActions />
  </MixerHeader>
  <MixerChannels />
  <MixerEmpty />
  <MixerSeparator />
  <MixerMaster />
</Mixer>

ExamplesCopy Anchor Link

ConsoleCopy Anchor Link

Sixteen strips in a console. Meters paint outside React, so a full console keeps the frame rate with no re-renders while it meters.

EmptyCopy Anchor Link

A complete mixerCopy Anchor Link

The System Audio Mixer block is a working mixer built from these parts.

BehaviourCopy Anchor Link

• Every meter in the mixer shares minDb, maxDb, zones and ballistics, so levels compare fairly across channels.
• With focus on a control in a strip, Ctrl + arrow keys move to the same control on the neighbouring strip: left and right in a console, up and down in rows. Tab still moves through every control in order.
• MixerChannels scrolls along the strip axis when strips overflow; the master area stays in place.
• MixerEmpty appears when MixerChannels has no children.

API referenceCopy Anchor Link

MixerCopy Anchor Link

MixerChannelsCopy Anchor Link