Audio Player

1import { useCallback, useEffect, useRef, useState } from 'react'
2import { FastForward, ListMusic, Pause, Play, Rewind, SkipBack, SkipForward, Volume2 } from 'lucide-react'
3import { Button } from '@/components/ui/button'
4import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
5import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
6import { Slider } from '@/components/ui/slider'
7import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
8import { cn } from '@/lib/utils'
9 
10export function InlineAudioPlayer() {
11  const [isPlaying, setIsPlaying] = useState(false)
12  const [volume, setVolume] = useState([72])
13  const audioContextRef = useRef<AudioContext | null>(null)
14  const sequenceStepRef = useRef(0)
15  const volumeRef = useRef(volume[0])
16  const duration = 243
17  const elapsedBeforePlayRef = useRef(102)
18  const playbackStartedAtRef = useRef(0)
19  const [currentTime, setCurrentTime] = useState(102)
20  const progress = (currentTime / duration) * 100
21  const formatTime = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
22  volumeRef.current = volume[0]
23 
24  const playStep = useCallback(() => {
25    const context = audioContextRef.current
26    if (!context || context.state !== 'running') return
27    const notes = [261.63, 329.63, 392, 493.88, 440, 392, 329.63, 293.66]
28    const note = notes[sequenceStepRef.current % notes.length]
29    sequenceStepRef.current += 1
30    const oscillator = context.createOscillator()
31    const gain = context.createGain()
32    oscillator.type = 'triangle'
33    oscillator.frequency.setValueAtTime(note, context.currentTime)
34    gain.gain.setValueAtTime((volumeRef.current / 100) * 0.035, context.currentTime)
35    gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 0.42)
36    oscillator.connect(gain).connect(context.destination)
37    oscillator.start()
38    oscillator.stop(context.currentTime + 0.43)
39  }, [])
40 
41  const togglePlayback = async () => {
42    if (isPlaying) {
43      const context = audioContextRef.current
44      if (context) {
45        const elapsed = Math.min(duration, Math.floor(elapsedBeforePlayRef.current + context.currentTime - playbackStartedAtRef.current))
46        elapsedBeforePlayRef.current = elapsed
47        setCurrentTime(elapsed)
48        await context.suspend()
49      }
50      setIsPlaying(false)
51      return
52    }
53    audioContextRef.current ??= new AudioContext()
54    await audioContextRef.current.resume()
55// … truncated