A/B switchPro

Two takes playing in sync with one key to switch, a 30 ms crossfade, the waveform of the take you hear and keep A or B.

Markdown

On this page

ProTwo takes playing in sync: press X anywhere to switch and the position never moves.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/audio-ab-switch

Usage

tsx

import { AudioAbSwitch } from "@/components/ui/chatcn/pro/audio-ab-switch"

<AudioAbSwitch a={{ label: "A", source: takeA }} b={{ label: "B", source: takeB }} onKeep={keep} />

Both takes play the whole time and only their gains change, so the position never jumps and the comparison is honest. The toggle key works anywhere on the page except in text fields.

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

ProB kept and disabled.

Props

Prop	Type	Notes
`a`, `b`	`AbTake`	Required. Label, note, source, peaks
`value`, `defaultValue`, `onValueChange`	`"a" \| "b"`
`onKeep`, `kept`		Keep A or B
`toggleKey`	`string \| null`	Default "x"
`labels`	`Partial<AudioAbLabels>`	Every string the switch shows or announces, for translation

Keyboard

Key	Action
`X`	Switch between A and B
`←` `→` on the takes	Pick a take
`←` `→` on the position	Seek

Accessibility

The takes are a radio group; switching announces which take you hear.

Motion

Switching is instant to the eye and a 30 ms crossfade to the ear.