'use client' import { useState, useEffect, useRef } from 'react' import { Howl } from 'howler' import { CirclePlay, CirclePause, SkipForward, SkipBack } from 'lucide-react' interface MusicCardProps { src: string; poster: string; autoPlay?: boolean; mainColor?: string; title?: string; artist?: string; } export function MusicCard ({ src, poster, autoPlay = false, mainColor = '#3b82f6', title = 'Unknown Title', artist = 'Unknown Artist' }: MusicCardProps){ const [isPlaying, setIsPlaying] = useState(false) const [progress, setProgress] = useState(0) const [duration, setDuration] = useState(0) const howler = useRef(null) const progressInterval = useRef() useEffect(() => { if (howler.current) { howler.current.stop() clearInterval(progressInterval.current) } const sound = new Howl({ src, onpause: () => { setIsPlaying(false) clearInterval(progressInterval.current) }, onplay: () => { setIsPlaying(true) updateProgress() }, onend: () => { setIsPlaying(false) clearInterval(progressInterval.current) setProgress(0) }, onstop: () => { setIsPlaying(false) clearInterval(progressInterval.current) setProgress(0) }, onload: () => { setDuration(sound.duration()) } }) howler.current = sound if (autoPlay) { sound.play() } return () => { clearInterval(progressInterval.current) } }, [src]) const updateProgress = () => { if (!howler.current) return progressInterval.current = setInterval(() => { const seek = howler.current?.seek() || 0 setProgress(seek) }, 1000) } const handlePlayPause = () => { if (!howler.current) return setIsPlaying(!isPlaying) if (isPlaying) { howler.current.pause() } else { howler.current.play() } } const handleSeek = (e: React.MouseEvent) => { if (!howler.current) return const container = e.currentTarget const rect = container.getBoundingClientRect() const x = e.clientX - rect.left const percentage = x / rect.width const newPosition = percentage * duration howler.current.seek(newPosition) setProgress(newPosition) } const handleSkip = (direction: 'forward' | 'backward') => { if (!howler.current) return const currentTime = howler.current.seek() as number const skipAmount = 10 // 10秒 const newTime = direction === 'forward' ? Math.min(currentTime + skipAmount, duration) : Math.max(currentTime - skipAmount, 0) howler.current.seek(newTime) setProgress(newTime) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = Math.floor(seconds % 60) return `${mins}:${secs.toString().padStart(2, '0')}` } const cardStyle = { '--main-color': mainColor, '--hover-color': `${mainColor}33`, // 添加透明度为0.2的主题色 } as React.CSSProperties return (

{/* 海报图片容器 */}

{/* 音乐信息 */}

{title}

{artist}

{/* 进度条 */}

{formatTime(progress)} {formatTime(duration)}

{/* 控制按钮 */}

) }