Features
- Search Functionality: Filter voices by name with built-in search
- Audio Preview: Play voice samples with play/pause controls
- Orb Visualization: Visual representation of each voice with the Orb component
- Keyboard Navigation: Full keyboard support for accessibility
- Controlled/Uncontrolled: Supports both controlled and uncontrolled patterns
- ElevenLabs Integration: Works seamlessly with ElevenLabs Voice API
- Audio Player: Integrated audio playback with shared state management
Usage
import { VoicePicker } from "@/components/ui/voice-picker";
Basic Usage
import { ElevenLabs } from "@elevenlabs/elevenlabs-js"
const voices: ElevenLabs.Voice[] = [
{
voice_id: "21m00Tcm4TlvDq8ikWAM",
name: "Rachel",
preview_url: "https://example.com/rachel-preview.mp3",
// ... other voice properties
},
// ... more voices
]
const [selectedVoice, setSelectedVoice] = useState("")
<VoicePicker
voices={voices}
value={selectedVoice}
onValueChange={setSelectedVoice}
/>
Controlled vs Uncontrolled
import { VoicePicker } from "@/components/ui/voice-picker";
export default ({ voices, selectedVoice, setSelectedVoice }) => (
<>
{/* Controlled */}
<VoicePicker voices={voices} value={selectedVoice} onValueChange={setSelectedVoice} />
{/* Uncontrolled */}
<VoicePicker voices={voices} onValueChange={(voiceId) => console.log("Selected:", voiceId)} />
</>
);
Control Open State
const [open, setOpen] = useState(false)
<VoicePicker
voices={voices}
open={open}
onOpenChange={setOpen}
value={selectedVoice}
onValueChange={setSelectedVoice}
/>
Custom Placeholder
<VoicePicker
voices={voices}
placeholder="Choose your voice..."
value={selectedVoice}
onValueChange={setSelectedVoice}
/>
Fetching Voices from ElevenLabs API
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js"
const [voices, setVoices] = useState<ElevenLabs.Voice[]>([])
useEffect(() => {
const client = new ElevenLabsClient({
apiKey: process.env.ELEVENLABS_API_KEY,
})
client.voices.getAll().then((response) => {
setVoices(response.voices)
})
}, [])
<VoicePicker
voices={voices}
value={selectedVoice}
onValueChange={setSelectedVoice}
/>
Connected examples use ElevenLabs services. Configure the demonstrated server action or token endpoint and agent settings in the host application. Keep API keys on the server; service usage is separate from the MIT-licensed UI.
