Audio Player

AI chats 6

About

A controlled playback surface for speech, generated audio, and recorded tool output.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Audio Player to your project and fits it to your theme.

Code

How Audio Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import AudioPlayer from '@/components/ui/audio-player'

export default function Demo() {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(42)

  return (
    <AudioPlayer
      artworkUrl="https://cdn.21st.dev/assets/mirror/64/645ac73ac1fce0b8d113f52d1dc417c0f4ab1d1c3472aa16292692769806aba8.jpg"
      className="w-full max-w-lg"
      currentTime={currentTime}
      duration={186}
      isPlaying={isPlaying}
      onChange={setCurrentTime}
      onToggle={() => setIsPlaying((current) => !current)}
      subtitle="Generated briefing · 3:06"
      title="Agent UI landscape"
    />
  )
}