Audio Player

1"use client"
2 
3import * as React from "react"
4import { Pause, Play } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7export interface AudioPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
8  /** Audio file URL. */
9  src: string
10  /** Optional label rendered above the seek bar (podcast episode, track name, sender…). */
11  title?: string
12  /** Native <audio> preload hint. */
13  preload?: "none" | "metadata"
14}
15 
16function formatTime(seconds: number) {
17  if (!Number.isFinite(seconds) || seconds < 0) return "0:00"
18  const m = Math.floor(seconds / 60)
19  const s = Math.floor(seconds % 60)
20  return `${m}:${s.toString().padStart(2, "0")}`
21}
22 
23export const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
24  ({ src, title, preload = "metadata", className, ...props }, ref) => {
25    const audioRef = React.useRef<HTMLAudioElement | null>(null)
26    const [playing, setPlaying] = React.useState(false)
27    const [currentTime, setCurrentTime] = React.useState(0)
28    const [duration, setDuration] = React.useState(0)
29    const [error, setError] = React.useState(false)
30 
31    // src 变化(播放列表复用同一实例)时重置全部派生状态:否则上一首的
32    // error/进度会残留,坏源之后的好源永远被禁用。渲染期 adjust-state 模式。
33    const [prevSrc, setPrevSrc] = React.useState(src)
34    if (prevSrc !== src) {
35      setPrevSrc(src)
36      setPlaying(false)
37      setCurrentTime(0)
38      setDuration(0)
39      setError(false)
40    }
41 
42    // Unmounting mid-playback shouldn't leave the clip running in the background.
43    React.useEffect(() => {
44      const audio = audioRef.current
45      return () => audio?.pause()
46    }, [])
47 
48    const togglePlay = () => {
49      const audio = audioRef.current
50      if (!audio || error) return
51      if (audio.paused) {
52        audio.play().catch(() => setError(true))
53      } else {
54        audio.pause()
55      }
56    }
57 
58    const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
59      const next = Number(e.target.value)
60      if (audioRef.current) audioRef.current.currentTime = next
61      setCurrentTime(next)
62    }
63 
64    const progress = duration > 0 ? (currentTime / duration) * 100 : 0
65 
66    return (
67      <div
68        className={cn("flex items-center gap-3 rounded-xl border bg-card px-4 py-3", className)}
69        ref={ref}
70        {...props}
71      >
72        <audio
73          onEnded={() => {
74            setPlaying(false)
75            setCurrentTime(0)
76// … truncated