Voice clone flowPro

Record or upload samples, each checked for background noise, clipping and level, with a meter of speech against what a close match needs, then a consent step and creation.

Markdown

On this page

ProTwo samples in, one with background noise. Record or upload more, confirm consent, and create the voice.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/voice-clone-flow

Usage

tsx

import { VoiceCloneFlow } from "@/components/ui/chatcn/pro/voice-clone-flow"

<VoiceCloneFlow onCreate={({ name, samples, owner }) => api.cloneVoice(name, samples, owner)} onUse={useVoice} />

Recording uses the browser's microphone with echo cancellation and noise suppression off, so the check hears the real room. Every sample is decoded and measured in the browser (analyzeSample): speech time, the noise floor between words and clipping. Noisy or clipping samples are named in a warning that says what to do. Continue waits for minSeconds of speech; the meter runs to idealSeconds.

Examples

States

ProNo samples, one being checked and one clipping, consent, creating, failed and done.

Props

Prop	Type	Notes
`samples`, `defaultSamples`, `onSamplesChange`	`CloneSample[]`	With `analysis` from `analyzeSample` or `scoreSample`
`step`, `defaultStep`, `onStepChange`	`"samples" \| "consent" \| "creating" \| "done" \| "error"`
`minSeconds`, `idealSeconds`	`number`	Default 30 and 120
`readingLines`	`string[]`	Shown while recording
`onCreate`	`(request) => Promise`	Resolve to finish, reject for the failed step
`resultSource`, `onUse`, `defaultName`		The done step
`error`	`ReactNode`	The failed step's message
`labels`	`Partial<VoiceCloneLabels>`	Every string the flow shows or announces, for translation

Keyboard

Key	Action
`Tab`	Record, upload, each sample's play and remove, Continue
`Space`	Toggle the consent statement
`Enter` in the name	Create the voice

Accessibility

The speech meter is a meter whose value text says how much is recorded and what is still needed.
Steps are an ordered list with the current one marked aria-current="step".
A blocked or missing microphone says how to fix it and offers upload instead.

Motion

The input level scrolls while recording and the meter fills with a 280 ms ease as samples are added: feedback for what the person did.
Steps swap with a 200 ms fade. Reduced motion keeps fades and holds the level still.