[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68306ae0d4648191ab7927e5fd3f2e8b","versionInt","title","Apple Style Music Player","type","code/react","content","import { useState, useRef, useEffect } from 'react';\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Pause, Play, SkipBack, SkipForward, Volume2, Search, Repeat, Shuffle, ListMusic } from \"lucide-react\";\nimport { parseBlob } from 'music-metadata-browser';\n\nexport default function MusicPlayer() {\n const [playing, setPlaying] = useState(false);\n const [volume, setVolume] = useState(0.5);\n const [progress, setProgress] = useState(0);\n const [duration, setDuration] = useState(0);\n const [audioFiles, setAudioFiles] = useState([]);\n const [currentIndex, setCurrentIndex] = useState(0);\n const [lyricsMap, setLyricsMap] = useState([]);\n const [currentLyric, setCurrentLyric] = useState(\"暂无歌词\");\n const [playMode, setPlayMode] = useState(\"sequence\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const audioRef = useRef(null);\n const autoPlayRef = useRef(false);\n\n useEffect(() => {\n const audio = audioRef.current;\n if (audio) {\n audio.volume = volume;\n const timeUpdate = () => {\n setProgress(audio.currentTime);\n syncLyrics(audio.currentTime);\n };\n const loaded = () => setDuration(audio.duration);\n const handleEnded = () => {\n if (playMode === \"repeat\") {\n audio.currentTime = 0;\n audio.play();\n } else {\n handleTrackChange(1);\n }\n };\n audio.addEventListener(\"timeupdate\", timeUpdate);\n audio.addEventListener(\"loadedmetadata\", loaded);\n audio.addEventListener(\"ended\", handleEnded);\n return () => {\n audio.removeEventListener(\"timeupdate\", timeUpdate);\n audio.removeEventListener(\"loadedmetadata\", loaded);\n audio.removeEventListener(\"ended\", handleEnded);\n };\n }\n }, [volume, currentIndex, playMode]);\n\n useEffect(() => {\n if (audioFiles.length > 0 && autoPlayRef.current) {\n const audio = audioRef.current;\n if (audio) {\n audio.play();\n setPlaying(true);\n }\n autoPlayRef.current = false;\n }\n }, [currentIndex, audioFiles]);\n\n const togglePlay = () => {\n const audio = audioRef.current;\n if (!audio) return;\n if (playing) {\n audio.pause();\n } else {\n audio.play();\n }\n setPlaying(!playing);\n };\n\n const handleVolumeChange = ([val]) => {\n setVolume(val);\n };\n\n const parseLyrics = (text) => {\n const lines = text.split(/\\r?\\n/);\n const result = lines.map(line => {\n const match = line.match(/\\[(\\d+):(\\d+)(?:\\.(\\d+))?\\](.*)/);\n if (match) {\n const min = parseInt(match[1], 10);\n const sec = parseInt(match[2], 10);\n const ms = parseInt(match[3] || \"0\", 10);\n return { time: min * 60 + sec + ms / 1000, text: match[4].trim() };\n }\n return null;\n }).filter(Boolean);\n return result;\n };\n\n const syncLyrics = (currentTime) => {\n if (!lyricsMap.length) return;\n const current = lyricsMap.reduce((prev, curr) => currentTime >= curr.time ? curr : prev);\n setCurrentLyric(current.text);\n };\n\n const handleFileChange = async (e) => {\n const files = Array.from(e.target.files);\n const urls = await Promise.all(files.map(async (file) => {\n const url = URL.createObjectURL(file);\n const metadata = await parseBlob(file).catch(() => ({}));\n let lyric = \"暂无歌词\";\n if (metadata.common && metadata.common.lyrics) {\n lyric = metadata.common.lyrics.join('\\n');\n }\n return {\n name: file.name,\n url,\n lyric\n };\n }));\n setAudioFiles(urls);\n setCurrentIndex(0);\n setLyricsMap(parseLyrics(urls[0]?.lyric || \"\"));\n setCurrentLyric(\"...\");\n setPlaying(false);\n autoPlayRef.current = false;\n };\n\n const handleTrackChange = (direction) => {\n let newIndex = currentIndex;\n if (playMode === \"random\") {\n newIndex = Math.floor(Math.random() * audioFiles.length);\n } else {\n newIndex = currentIndex + direction;\n if (newIndex < 0) newIndex = audioFiles.length - 1;\n if (newIndex >= audioFiles.length) newIndex = 0;\n }\n setCurrentIndex(newIndex);\n setLyricsMap(parseLyrics(audioFiles[newIndex]?.lyric || \"\"));\n setCurrentLyric(\"...\");\n setProgress(0);\n autoPlayRef.current = true;\n };\n\n const togglePlayMode = () => {\n const modes = [\"sequence\", \"repeat\", \"random\"];\n const current = modes.indexOf(playMode);\n setPlayMode(modes[(current + 1) % modes.length]);\n };\n\n const formatTime = (time) => {\n const mins = Math.floor(time / 60);\n const secs = Math.floor(time % 60).toString().padStart(2, '0');\n return `${mins}:${secs}`;\n };\n\n const filteredAudioFiles = audioFiles.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()));\n\n return (\n

\n \n \n

\n \n \n \n \n

\n \n \n

\n \n

\n {formatTime(progress)}\n {formatTime(duration)}\n

\n {\n const val = Number(e.target.value);\n audioRef.current.currentTime = val;\n setProgress(val);\n }}\n className=\"w-full\"\n />\n

\n \n \n

\n {currentLyric || \"暂无歌词\"}\n

\n \n setSearchQuery(e.target.value)} />\n

\n \n \n

{\n setCurrentIndex(actualIndex);\n setLyricsMap(parseLyrics(track.lyric));\n setCurrentLyric(\"...\");\n setProgress(0);\n autoPlayRef.current = true;\n }}\n >\n {track.name}\n \n );\n })}\n

\n \n \n

\n {audioFiles.length > 0 &&

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6479026696987450631","traceTime",1778084166827]