Components/AI

Audio Interaction

Interactive audio component with particle animation, playback controls, and timer display

Live Preview
Open in
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

PropTypeDefaultDescription
onAudioStart() => voidundefinedCallback when audio playback starts
onAudioStop() => voidundefinedCallback when audio playback stops
onAudioPause() => voidundefinedCallback when audio playback pauses
onAudioResume() => voidundefinedCallback 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