Agent Audio Generator
A comprehensive audio generation interface with waveform visualization, voice controls, and customizable audio settings.
Features
- Waveform Display: Visual audio representation with playback progress
- Voice Selection: Multiple voice options with gender and accent choices
- Audio Controls: Play, pause, seek, and time display
- Voice Settings: Language, speed, tone, and voice customization
- Export Options: Export audio in multiple formats (MP3, WAV, M4A)
- Loading States: Visual feedback during audio generation
- Responsive Design: Adapts to different screen sizes
Examples
Basic Usage
Simple audio generator with standard controls.
Your audio has been successfully generated. You may further customize it or simply download it for use.
0:211:02
Voice
Just now
😊😔
Interactive Demo
Full-featured demo with voice switching and playback controls.
Your audio has been successfully generated. You may further customize it or simply download it for use.
0:211:02
Voice
Just now
😊😔
Voice Settings:
Playback Controls:
Chat Integration
Example of how the audio generator works within a chat conversation:
Audio Generation Chat
Showing how the audio generator works in a chat context
Can you generate an audio narration for my presentation?
🔊
I'll create a professional audio narration for your presentation.
Your audio has been successfully generated. You may further customize it or simply download it for use.
0:211:02
Voice
Just now
😊😔
Installation
npx shadcn add "https://agents-ui-kit.com/c/agent-audio-generator.json"API Reference
AgentAudioGenerator
| Prop | Type | Default | Description |
|---|---|---|---|
| audioUrl | string | - | URL of the generated audio |
| isGenerating | boolean | false | Whether audio is being generated |
| isPlaying | boolean | false | Whether audio is currently playing |
| currentTime | number | 0 | Current playback time in seconds |
| duration | number | 0 | Total audio duration in seconds |
| onPlay | () => void | - | Play audio callback |
| onPause | () => void | - | Pause audio callback |
| onSeek | (time: number) => void | - | Seek to time callback |
| onExport | (format?: ExportFormat) => void | - | Export callback |
| onCopy | () => void | - | Copy audio callback |
| onEdit | () => void | - | Edit settings callback |
| onRegenerateResponse | () => void | - | Regenerate callback |
| onLanguageChange | (language: string) => void | - | Language change callback |
| onSpeedChange | (speed: string) => void | - | Speed change callback |
| onVoiceChange | (voice: VoiceOption) => void | - | Voice change callback |
| onToneChange | (tone: string) => void | - | Tone change callback |
| language | string | "English (US)" | Selected language |
| speed | string | "Normal" | Playback speed |
| voice | VoiceOption | - | Selected voice configuration |
| tone | string | "Friendly" | Voice tone |
| availableVoices | VoiceOption[] | [] | Available voice options |
| className | string | - | Additional CSS classes |
| timestamp | string | "Just now" | Display timestamp |
VoiceOption
| Property | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | Unique voice identifier |
| name | string | Yes | Voice display name |
| gender | "Male" | "Female" | Yes | Voice gender |
| accent | string | No | Voice accent/region |
Export Formats
type ExportFormat = "mp3" | "wav" | "m4a"
Voice Tones
The component supports multiple voice tones:
- Professional: Formal, business-appropriate tone
- Friendly: Warm, approachable tone
- Excited: Enthusiastic, energetic tone
- Calm: Relaxed, soothing tone