Voice Picker

Choose a synthetic voice, with a spoken preview for each option.

Aria

Warm and steady

CalmSupport

Leo

Bright and quick

UpbeatSales

Mina

Clear and precise

NeutralNarration

Installation

pnpm dlx shadcn@latest add @jds/voice-picker

Usage

import { VoicePicker } from "@/components/voice/voice-picker"

<VoicePicker
  voices={[{ id: "aria", name: "Aria", description: "Warm and steady", tags: ["Calm"] }]}
  value={voice}
  onValueChange={setVoice}
  onPreview={(v) => tts.play(v.id)}
  onStopPreview={() => tts.stop()}
/>

API Reference

VoicePicker

Prop	Type	Default
`voices`	{ id, name, description?, tags? }[]	–
`onPreview` Play a sample. The button shows stop until the promise settles.	(voice) => Promise<void> \| void	–
`onStopPreview` Cut a preview short.	() => void	–
`value` Controlled voice id. Or use defaultValue.	string	–

Voice Orb Waveform