Voice designPro

Describe a voice in words, hear three previews, pick the closest, nudge it or refine from it, then name and save it.

Markdown

On this page

ProDescribe a voice, hear three takes on it, pick, nudge with warmer or slower, refine, then name and save.

Installation

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

Usage

tsx

import { VoiceDesign } from "@/components/ui/chatcn/pro/voice-design"

<VoiceDesign
  previews={previews}
  status={status}
  round={round}
  onGenerate={({ description, previewText, base }) => design(description, previewText, base)}
  onSave={({ name, previewId }) => save(name, previewId)}
/>

Design runs only when the description is long enough to work with (minLength); shorter, it says what to add. Once a preview is picked, Design becomes Refine and base carries the pick. The nudges append to the description, so the words stay the source of truth.

The examples play a demo synthesizer built on the Web Audio API (renderBabble and renderSfx in @/lib/chatcn-pro-speech): it sounds like a voice behind a wall, so nothing pretends to be a real model. Pass your API's audio as URLs or buffers instead.

Examples

States

ProFirst visit with ideas, generating, picked and ready to save, a failed run and saved.

Props

Prop	Type	Notes
`description`, `defaultDescription`, `onDescriptionChange`	`string`
`previewText`, `defaultPreviewText`, `onPreviewTextChange`	`string`	The line the previews say
`previews`	`VoiceDesignPreview[]`	Three read best: id, notes, peaks, source
`round`	`number`	Shown from round 2
`status`	`"idle" \| "generating" \| "saving" \| "saved"`
`onGenerate`, `onStop`		`{ description, previewText, base }`
`picked`, `defaultPicked`, `onPickedChange`	`string`
`onSave`, `savedName`, `onUse`, `onReset`		The save row and the saved state
`error`, `onRetry`		Say how to fix it
`suggestions`, `refinements`, `minLength`		Default nudges: warmer, younger, older, slower, brighter, more breath
`labels`	`Partial<VoiceDesignLabels>`	Every string the designer shows or announces, for translation

Keyboard

Key	Action
`Enter`	Design, or Refine once a preview is picked
`←` `→` in the previews	Move the pick
`Esc`	Stop a run

Accessibility

Previews are a radio group; each radio is named with its letter and what sets it apart.
A short description is marked invalid and points at the hint that says what to add.
Ready and saved are announced politely.

Motion

Nothing shows for 300 ms, then the text shimmer; the three slots hold their size so the results land without a jump.
Previews fade in over 200 ms and the saved state fades in the same way. Reduced motion keeps fades only.