4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T2729,import { useCallback, useEffect, useRef, useState } from 'react' import { FastForward, ListMusic, Pause, Play, Rewind, SkipBack, SkipForward, Volume2 } from 'lucide-react' import { Button } from '@/components/ui/button' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Slider } from '@/components/ui/slider' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import { cn } from '@/lib/utils' export function InlineAudioPlayer() { const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState([72]) const audioContextRef = useRef(null) const sequenceStepRef = useRef(0) const volumeRef = useRef(volume[0]) const duration = 243 const elapsedBeforePlayRef = useRef(102) const playbackStartedAtRef = useRef(0) const [currentTime, setCurrentTime] = useState(102) const progress = (currentTime / duration) * 100 const formatTime = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}` volumeRef.current = volume[0] const playStep = useCallback(() => { const context = audioContextRef.current if (!context || context.state !== 'running') return const notes = [261.63, 329.63, 392, 493.88, 440, 392, 329.63, 293.66] const note = notes[sequenceStepRef.current % notes.length] sequenceStepRef.current += 1 const oscillator = context.createOscillator() const gain = context.createGain() oscillator.type = 'triangle' oscillator.frequency.setValueAtTime(note, context.currentTime) gain.gain.setValueAtTime((volumeRef.current / 100) * 0.035, context.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 0.42) oscillator.connect(gain).connect(context.destination) oscillator.start() oscillator.stop(context.currentTime + 0.43) }, []) const togglePlayback = async () => { if (isPlaying) { const context = audioContextRef.current if (context) { const elapsed = Math.min(duration, Math.floor(elapsedBeforePlayRef.current + context.currentTime - playbackStartedAtRef.current)) elapsedBeforePlayRef.current = elapsed setCurrentTime(elapsed) await context.suspend() } setIsPlaying(false) return } audioContextRef.current ??= new AudioContext() await audioContextRef.current.resume() playbackStartedAtRef.current = audioContextRef.current.currentTime sequenceStepRef.current = Math.floor(elapsedBeforePlayRef.current / 0.48) setIsPlaying(true) } const seek = (percentage: number) => { const nextTime = Math.round((percentage / 100) * duration) elapsedBeforePlayRef.current = nextTime sequenceStepRef.current = Math.floor(nextTime / 0.48) if (audioContextRef.current) playbackStartedAtRef.current = audioContextRef.current.currentTime setCurrentTime(nextTime) } useEffect(() => { if (!isPlaying) return playStep() const progressTimer = window.setInterval(() => { const context = audioContextRef.current if (!context) return const elapsed = Math.floor(elapsedBeforePlayRef.current + context.currentTime - playbackStartedAtRef.current) if (elapsed >= duration) { elapsedBeforePlayRef.current = 0 playbackStartedAtRef.current = context.currentTime sequenceStepRef.current = 0 setCurrentTime(0) return } setCurrentTime(elapsed) }, 100) const audioTimer = window.setInterval(playStep, 480) return () => { window.clearInterval(progressTimer); window.clearInterval(audioTimer) } }, [isPlaying, playStep]) return

Night Drive

Demo synth loop

{formatTime(currentTime)} / {formatTime(duration)}

seek(Number(event.target.value))} />

Previous track{isPlaying ? 'Pause' : 'Play'}Next trackAdjust volume{volume[0]}%

} export type AudioPlayerProps = { currentTime: number handleSeek: (value: number[]) => void audioDuration: number skipBack: () => void skipForward: () => void togglePlayPause: () => void isPlaying: boolean volume: number setVolume: (value: number) => void } function formatTime(seconds: number) { return `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, '0')}` } export function FloatingAudioPlayer({ className, fixed = true, currentTime, handleSeek, audioDuration, skipBack, skipForward, togglePlayPause, isPlaying, volume, setVolume }: AudioPlayerProps & { className?: string; fixed?: boolean }) { return

Skip back 10 seconds {isPlaying ? 'Pause' : 'Play'} Skip forward 10 seconds {formatTime(currentTime)} Live transcription Adjust volume{volume}% setVolume(newVolume[0])} max={100} step={1} aria-label="Volume" />

} export function FloatingAudioPlayerDemo() { const [currentTime, setCurrentTime] = useState(78) const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState(72) const audioDuration = 243 useEffect(() => { if (!isPlaying) return const timer = window.setInterval(() => setCurrentTime((time) => time >= audioDuration ? 0 : time + 1), 1000) return () => window.clearInterval(timer) }, [isPlaying]) 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} />

} 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4a",null,{"namespace":"@amarjay-ui","registryDependencies":["button","avatar","popover","slider","tooltip"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"src/components/examples/audio-player.tsx","content":"$4c","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]