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.

Generated audio

Ready | 1:02 | Just now

0:211:02

Interactive Demo

Full-featured demo with voice switching and playback controls.

Generated audio

Ready | 1:02 | Just now

0:211:02

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?
AU

I'll create a professional audio narration for your presentation.

Generated audio

Ready | 1:02 | Just now

0:211:02

Installation

npx shadcn@latest add "https://agents-ui.github.io/agents-kit/c/agent-audio-generator.json"

API Reference

AgentAudioGenerator

PropTypeDefaultDescription
audioUrlstring-URL of the generated audio
isGeneratingbooleanfalseWhether audio is being generated
isPlayingbooleanfalseWhether audio is currently playing
currentTimenumber0Current playback time in seconds
durationnumber0Total 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
languagestring"English (US)"Selected language
speedstring"Normal"Playback speed
voiceVoiceOption-Selected voice configuration
tonestring"Friendly"Voice tone
availableVoicesVoiceOption[][]Available voice options
classNamestring-Additional CSS classes
timestampstring"Just now"Display timestamp

VoiceOption

PropertyTypeRequiredDescription
idstringYesUnique voice identifier
namestringYesVoice display name
gender"Male" | "Female"YesVoice gender
accentstringNoVoice 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
Agent Video EditorAgent Grammar Checker