Stem mixerPro

Stems in sync with mute, solo, a fader and a live meter each, export per stem with its state, and the mix meter.

Markdown

On this page

ProFour stems in sync on a loop with mute, solo, faders, live meters and export per stem.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/stem-mixer

Usage

tsx

import { StemMixer } from "@/components/ui/chatcn/pro/stem-mixer"

<StemMixer stems={stems} onExport={exportStem} exports={exportStates} />

A stem is { id, name, detail, source }; every stem loads into one engine and plays sample accurate, looping by default. Solo wins over everything and mute over its fader; switches ramp the gain over 10 ms so they never click. Meters read after the fader.

The examples play a demo synthesizer built on the Web Audio API (renderStem and renderSong in @/lib/chatcn-pro-music): drums, bass, keys and a sung line in a key and tempo, rendered offline. Pass your own audio as URLs or buffers instead.

Examples

States

ProSolo and mute with export results, separating and failed.

Props

Prop	Type	Notes
`stems`	`Stem[]`	Required
`mix`, `defaultMix`, `onMixChange`	`StemMix`	Volume, mute and solo per stem
`loop`	`boolean`	Default true
`status`, `error`, `onRetry`		Ready, separating or error
`onExport`, `onExportAll`, `exports`		Export per stem and its state
`labels`	`Partial<StemMixerLabels>`	Every string the mixer shows or announces, for translation

Keyboard

Key	Action
`M` in a row	Mute that stem
`S` in a row	Solo that stem
`←` `→` on a fader	Change its volume

Accessibility

Mute and solo are toggle buttons named with their stem. Each meter is a meter with its value in dB.
Export state is in the button's name and tooltip, with an icon as well as a color.

Motion

Meters follow the audio. Separating shows the text shimmer after 300 ms. Nothing else moves.