jatui

VoicePlayer

TTS playback widget with voice selection, speed, and provider switching

Standalone (right-expand)

Click the play icon to synthesize

Left-expand variant

Controls open leftward (for right-aligned layouts)

Props

PropTypeDefaultDescription
textstring-Text to synthesize
voiceIdstring"alloy"Initial voice ID
voiceNamestring-Display name for the voice
expandDirection"left" | "right""left"Which direction controls panel opens
autoPlaybooleanfalseStart playback on mount
voicesUrlstring"/api/voices"GET endpoint returning available voices
ttsUrlstring"/api/tts"POST endpoint that returns audio/mpeg
onVoiceChange(id, name, provider) => void-Called when user selects a different voice
onPlaybackComplete() => void-Called when audio finishes