Components/AI
Audio Interaction
Interactive audio component with particle animation, playback controls, and timer display
00:00
Example
export default function AudioInteractionExample() {
const handleAudioStart = () => {
console.log('Audio started')
}
const handleAudioStop = () => {
console.log('Audio stopped')
}
const handleAudioPause = () => {
console.log('Audio paused')
}
const handleAudioResume = () => {
console.log('Audio resumed')
}
return (
<AudioInteraction
onAudioStart={handleAudioStart}
onAudioStop={handleAudioStop}
onAudioPause={handleAudioPause}
onAudioResume={handleAudioResume}
className="w-full"
/>
)
}
Documentation
Prop | Type | Default | Description |
---|---|---|---|
onAudioStart | () => void | undefined | Callback when audio playback starts |
onAudioStop | () => void | undefined | Callback when audio playback stops |
onAudioPause | () => void | undefined | Callback when audio playback pauses |
onAudioResume | () => void | undefined | Callback when audio playback resumes |
Types
type AudioInteractionProps = {
onAudioStart?: () => void
onAudioStop?: () => void
onAudioPause?: () => void
onAudioResume?: () => void
}
type Status = 'idle' | 'playing' | 'paused'
Features
- Particle Animation: Visual feedback with animated particles during playback
- Playback Controls: Start, pause, resume, and stop functionality
- Timer Display: Real-time elapsed time display in MM:SS format
- State Management: Tracks idle, playing, and paused states
- Event Callbacks: Comprehensive callback system for all audio events
- Responsive Design: Adapts to different screen sizes with mobile-friendly controls
- Visual Feedback: Clear button states and particle animation synchronization
- Accessibility Support: Proper ARIA labels and keyboard navigation