{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "audio-player", "title": "Audio Player", "description": "Inline and floating audio-player controls.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "avatar", "popover", "slider", "tooltip" ], "files": [ { "path": "src/components/examples/audio-player.tsx", "content": "import { useCallback, useEffect, useRef, useState } from 'react'\nimport { FastForward, ListMusic, Pause, Play, Rewind, SkipBack, SkipForward, Volume2 } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { Slider } from '@/components/ui/slider'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'\nimport { cn } from '@/lib/utils'\n\nexport function InlineAudioPlayer() {\n const [isPlaying, setIsPlaying] = useState(false)\n const [volume, setVolume] = useState([72])\n const audioContextRef = useRef(null)\n const sequenceStepRef = useRef(0)\n const volumeRef = useRef(volume[0])\n const duration = 243\n const elapsedBeforePlayRef = useRef(102)\n const playbackStartedAtRef = useRef(0)\n const [currentTime, setCurrentTime] = useState(102)\n const progress = (currentTime / duration) * 100\n const formatTime = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`\n volumeRef.current = volume[0]\n\n const playStep = useCallback(() => {\n const context = audioContextRef.current\n if (!context || context.state !== 'running') return\n const notes = [261.63, 329.63, 392, 493.88, 440, 392, 329.63, 293.66]\n const note = notes[sequenceStepRef.current % notes.length]\n sequenceStepRef.current += 1\n const oscillator = context.createOscillator()\n const gain = context.createGain()\n oscillator.type = 'triangle'\n oscillator.frequency.setValueAtTime(note, context.currentTime)\n gain.gain.setValueAtTime((volumeRef.current / 100) * 0.035, context.currentTime)\n gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 0.42)\n oscillator.connect(gain).connect(context.destination)\n oscillator.start()\n oscillator.stop(context.currentTime + 0.43)\n }, [])\n\n const togglePlayback = async () => {\n if (isPlaying) {\n const context = audioContextRef.current\n if (context) {\n const elapsed = Math.min(duration, Math.floor(elapsedBeforePlayRef.current + context.currentTime - playbackStartedAtRef.current))\n elapsedBeforePlayRef.current = elapsed\n setCurrentTime(elapsed)\n await context.suspend()\n }\n setIsPlaying(false)\n return\n }\n audioContextRef.current ??= new AudioContext()\n await audioContextRef.current.resume()\n playbackStartedAtRef.current = audioContextRef.current.currentTime\n sequenceStepRef.current = Math.floor(elapsedBeforePlayRef.current / 0.48)\n setIsPlaying(true)\n }\n\n const seek = (percentage: number) => {\n const nextTime = Math.round((percentage / 100) * duration)\n elapsedBeforePlayRef.current = nextTime\n sequenceStepRef.current = Math.floor(nextTime / 0.48)\n if (audioContextRef.current) playbackStartedAtRef.current = audioContextRef.current.currentTime\n setCurrentTime(nextTime)\n }\n\n useEffect(() => {\n if (!isPlaying) return\n playStep()\n const progressTimer = window.setInterval(() => {\n const context = audioContextRef.current\n if (!context) return\n const elapsed = Math.floor(elapsedBeforePlayRef.current + context.currentTime - playbackStartedAtRef.current)\n if (elapsed >= duration) {\n elapsedBeforePlayRef.current = 0\n playbackStartedAtRef.current = context.currentTime\n sequenceStepRef.current = 0\n setCurrentTime(0)\n return\n }\n setCurrentTime(elapsed)\n }, 100)\n const audioTimer = window.setInterval(playStep, 480)\n return () => { window.clearInterval(progressTimer); window.clearInterval(audioTimer) }\n }, [isPlaying, playStep])\n\n return
\n ND\n

Night Drive

Demo synth loop

{formatTime(currentTime)} / {formatTime(duration)}
seek(Number(event.target.value))} />
\n
Previous track{isPlaying ? 'Pause' : 'Play'}Next trackAdjust volume{volume[0]}%
\n
\n}\n\nexport type AudioPlayerProps = {\n currentTime: number\n handleSeek: (value: number[]) => void\n audioDuration: number\n skipBack: () => void\n skipForward: () => void\n togglePlayPause: () => void\n isPlaying: boolean\n volume: number\n setVolume: (value: number) => void\n}\n\nfunction formatTime(seconds: number) {\n return `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, '0')}`\n}\n\nexport function FloatingAudioPlayer({ className, fixed = true, currentTime, handleSeek, audioDuration, skipBack, skipForward, togglePlayPause, isPlaying, volume, setVolume }: AudioPlayerProps & { className?: string; fixed?: boolean }) {\n return
\n Skip back 10 seconds\n {isPlaying ? 'Pause' : 'Play'}\n Skip forward 10 seconds\n \n {formatTime(currentTime)}\n Live transcription\n Adjust volume{volume}% setVolume(newVolume[0])} max={100} step={1} aria-label=\"Volume\" />\n
\n}\n\nexport function FloatingAudioPlayerDemo() {\n const [currentTime, setCurrentTime] = useState(78)\n const [isPlaying, setIsPlaying] = useState(false)\n const [volume, setVolume] = useState(72)\n const audioDuration = 243\n\n useEffect(() => {\n if (!isPlaying) return\n const timer = window.setInterval(() => setCurrentTime((time) => time >= audioDuration ? 0 : time + 1), 1000)\n return () => window.clearInterval(timer)\n }, [isPlaying])\n\n return
setCurrentTime(value[0])} audioDuration={audioDuration} skipBack={() => setCurrentTime((time) => Math.max(0, time - 10))} skipForward={() => setCurrentTime((time) => Math.min(audioDuration, time + 10))} togglePlayPause={() => setIsPlaying((value) => !value)} isPlaying={isPlaying} volume={volume} setVolume={setVolume} />
\n}\n", "type": "registry:block" } ], "type": "registry:block" }