Audio Player

Copyimport {
  AudioPlayerButton,
  AudioPlayerDuration,
  AudioPlayerProgress,
  AudioPlayerProvider,
  AudioPlayerSpeed,
  AudioPlayerSpeedButtonGroup,
  AudioPlayerTime,
  useAudioPlayer,
  useAudioPlayerTime,
} from "@/components/ui/audio-player"

Copy<AudioPlayerProvider>
  <div className="flex items-center gap-4">
    <AudioPlayerButton />
    <AudioPlayerProgress className="flex-1" />
    <AudioPlayerTime />
    <span>/</span>
    <AudioPlayerDuration />
  </div>
</AudioPlayerProvider>

Copyconst track = {
  id: "track-1",
  src: "/audio/song.mp3",
  data: { title: "My Song", artist: "Artist Name" }
}
 
<AudioPlayerProvider>
  <AudioPlayerButton item={track} />
  <AudioPlayerProgress />
</AudioPlayerProvider>

Copyconst tracks = [
  { id: "1", src: "/audio/track1.mp3", data: { title: "Track 1" } },
  { id: "2", src: "/audio/track2.mp3", data: { title: "Track 2" } },
  { id: "3", src: "/audio/track3.mp3", data: { title: "Track 3" } },
]
 
<AudioPlayerProvider>
  <div className="space-y-4">
    {tracks.map((track) => (
      <div key={track.id} className="flex items-center gap-4">
        <AudioPlayerButton item={track} />
        <span className="text-sm">{track.data.title}</span>
      </div>
    ))}
    <AudioPlayerProgress className="w-full" />
    <div className="flex gap-2 text-sm">
      <AudioPlayerTime />
      <span>/</span>
      <AudioPlayerDuration />
    </div>
  </div>
</AudioPlayerProvider>

Copy<AudioPlayerProvider>{children}</AudioPlayerProvider>

Copyinterface AudioPlayerItem<TData = unknown> {
  id: string | number
  src: string
  data?: TData
}

Copy<AudioPlayerSpeed variant="ghost" size="icon" />

Copy<AudioPlayerSpeedButtonGroup speeds={[0.5, 0.75, 1, 1.5, 2]} />

Copyconst {
  ref, // RefObject<HTMLAudioElement>
  activeItem, // Current playing item
  duration, // Track duration in seconds
  error, // MediaError if any
  isPlaying, // Playing state
  isBuffering, // Buffering state
  playbackRate, // Current playback speed
  isItemActive, // Check if an item is active
  setActiveItem, // Set the active item
  play, // Play audio
  pause, // Pause audio
  seek, // Seek to time
  setPlaybackRate, // Change playback speed
} = useAudioPlayer<TData>()

Copyfunction PlaylistController() {
  const { play, pause, isPlaying, activeItem } = useAudioPlayer()
 
  const handlePlayNext = () => {
    const nextTrack = getNextTrack(activeItem?.id)
    if (nextTrack) {
      play(nextTrack)
    }
  }
 
  return <button onClick={handlePlayNext}>Next Track</button>
}

Copyconst time = useAudioPlayerTime() // Current time in seconds

Copyfunction CustomTimeDisplay() {
  const time = useAudioPlayerTime()
  const { duration } = useAudioPlayer()
 
  const percentage = duration ? (time / duration) * 100 : 0
 
  return <div>Progress: {percentage.toFixed(1)}%</div>
}

Copyfunction AudioPlayerWithSpeed() {
  return (
    <AudioPlayerProvider>
      <div className="flex items-center gap-4">
        <AudioPlayerButton />
        <AudioPlayerTime />
        <AudioPlayerProgress className="flex-1" />
        <AudioPlayerDuration />
        <AudioPlayerSpeed />
      </div>
    </AudioPlayerProvider>
  )
}

Copyfunction CustomAudioPlayer() {
  const { play, pause, isPlaying, seek, duration, setPlaybackRate } =
    useAudioPlayer()
 
  return (
    <div className="space-y-4">
      <button onClick={() => (isPlaying ? pause() : play())}>
        {isPlaying ? "Pause" : "Play"}
      </button>
 
      <button onClick={() => seek(0)}>Restart</button>
 
      <button onClick={() => duration && seek(duration * 0.5)}>
        Jump to 50%
      </button>
 
      <button onClick={() => setPlaybackRate(1.5)}>Speed 1.5x</button>
    </div>
  )
}

Copyfunction AudioPlayerWithError() {
  const { error, activeItem } = useAudioPlayer()
 
  if (error) {
    return (
      <div className="text-red-500">
        Failed to load: {activeItem?.src}
        <br />
        Error: {error.message}
      </div>
    )
  }
 
  return <AudioPlayerButton />
}