Voice libraryPro
A voice grid with search and filters by accent, use case and register, each card with its sample and waveform in place. The library scale variant of the free voice-picker.
On this page
ProTwelve voices with search and filters by accent, use case and register. Play any sample in place.
Installation
Usage
import { VoiceLibrary } from "@/components/ui/chatcn/pro/voice-library"
<VoiceLibrary voices={voices} value={voiceId} onValueChange={setVoiceId} onLockedSelect={openUpgrade} />Filters come from the voices themselves, so a library with no accents shows no accent filter. A card plays previewUrl, or getSample(voice) when you pass it. Voices with a plan wear a lock and call onLockedSelect instead of being picked. Use the free voice-picker for short lists in a toolbar.
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
ProLoading, filtered, no matches, failed and an empty library.
Props
| Prop | Type | Notes |
|---|---|---|
voices | SpeechVoice[] | Required. Name, description, accent, use case, register, tags |
value, defaultValue, onValueChange | string | |
filters, defaultFilters, onFiltersChange | VoiceLibraryFilters | Query, accents, use cases, registers |
getSample | (voice) => SpeechSource | Default previewUrl |
onLockedSelect | (voice) => void | |
loading, error, onRetry | ||
hideToolbar, disabled | boolean | |
labels | Partial<VoiceLibraryLabels> | Every string the library shows or announces, for translation |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Move between cards, by row and column |
Home, End | First and last card |
Enter | Pick the voice |
Space | Play or stop the sample |
Accessibility
- The grid is a listbox with one tab stop; each card is an option named with the voice, its description and facts.
- The result count is a polite live region. Playback errors are announced.
Motion
- Filter menus grow from their trigger in 180 ms. Results swap at once. A playing card fills its waveform and rings its play button. Cards press at 0.97; nothing lifts on hover.