1.先看效果

2.源代码

"use client"

import { useState, useRef, useEffect } from "react"

import { motion, AnimatePresence } from "framer-motion"

import { Play, Pause, SkipBack, SkipForward, Volume2 } from "lucide-react"

import { Slider } from "@/components/ui/slider"

export default function MusicPlayer() {

const [isPlaying, setIsPlaying] = useState(false)

const [currentTime, setCurrentTime] = useState(0)

const [duration, setDuration] = useState(0)

const [volume, setVolume] = useState(1)

const audioRef = useRef(null)

useEffect(() => {

if (audioRef.current) {

audioRef.current.volume = volume

}

}, [volume])

const togglePlay = () => {

if (audioRef.current) {

if (isPlaying) {

audioRef.current.pause()

} else {

audioRef.current.play()

}

setIsPlaying(!isPlaying)

}

}

const handleTimeUpdate = () => {

if (audioRef.current) {

setCurrentTime(audioRef.current.currentTime)

setDuration(audioRef.current.duration)

}

}

const handleSeek = (newValue: number[]) => {

if (audioRef.current) {

audioRef.current.currentTime = newValue[0]

setCurrentTime(newValue[0])

}

}

const formatTime = (time: number) => {

const minutes = Math.floor(time / 60)

const seconds = Math.floor(time % 60)

return `${minutes}:${seconds.toString().padStart(2, '0')}`

}

return (

)

}