Spaces:

Kicool
/

cloudyy

Running

App Files Files Community

xukunCai commited on Oct 7, 2025

Commit

2be311a

verified ·

1 Parent(s): 14ddbbc

Update index.html

Browse files

Files changed (1) hide show

index.html +216 -50

index.html CHANGED Viewed

@@ -6,7 +6,6 @@
     <title>云音乐 - 在线音乐播放器</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        /* CSS样式部分保持不变，此处省略以保持简洁 */
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #f8f9fa; color: #333; overflow-x: hidden; line-height: 1.6; }
         .navbar { background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
@@ -101,7 +100,6 @@
     </style>
 </head>
 <body>
-    <!-- HTML结构部分保持不变 -->
     <nav class="navbar">
         <div class="nav-container">
             <div class="logo"><i class="fas fa-music"></i><span>云音乐</span></div>
@@ -193,11 +191,11 @@
     <script>
         // Dr.Kun: 常量和全局变量
         const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
-        const PLAYER_STATE_KEY = 'cloudMusicPlayerState_v2'; // Dr.Kun: 升级版本号以避免旧数据冲突
         let currentPlaylist = [];
         let currentIndex = -1;
         let isPlaying = false;
-        let timeToRestore = 0; // Dr.Kun: 核心升级 - 用于暂存需要恢复的播放时间
         // Dr.Kun: DOM元素缓存
         const audioPlayer = document.getElementById('audioPlayer');
@@ -212,24 +210,21 @@
         const volumeSlider = document.getElementById('volumeSlider');
         const searchInput = document.getElementById('searchInput');
-        // Dr.Kun: 核心升级 - 保存播放器状态（现在包含播放进度）
         function savePlayerState() {
             const state = {
                 playlist: currentPlaylist,
                 index: currentIndex,
                 volume: audioPlayer.volume,
                 quality: qualitySelect.value,
                 source: sourceSelect.value,
-                currentTime: audioPlayer.currentTime > 1 ? audioPlayer.currentTime : 0 // Dr.Kun: 只在播放超过1秒时保存进度，避免存入无效的0
             };
             try {
                 localStorage.setItem(PLAYER_STATE_KEY, JSON.stringify(state));
-            } catch (e) {
-                console.error("保存状态失败:", e);
-            }
         }
-        // Dr.Kun: 核心升级 - 从localStorage加载播放器状态
         async function loadPlayerState() {
             try {
                 const savedState = localStorage.getItem(PLAYER_STATE_KEY);
@@ -238,15 +233,15 @@
                 const state = JSON.parse(savedState);
                 currentPlaylist = state.playlist || [];
-                currentIndex = state.index || -1;
-                timeToRestore = state.currentTime || 0; // Dr.Kun: 读取要恢复的时间
                 qualitySelect.value = state.quality || '320';
                 sourceSelect.value = state.source || 'netease';
                 const volumeValue = (state.volume !== undefined ? state.volume : 0.8) * 100;
                 volumeSlider.value = volumeValue;
-                setVolume(volumeValue, false); // Dr.Kun: 初始化时不保存状态，避免循环
                 if (currentPlaylist.length > 0) {
                     displaySearchResults(currentPlaylist);
@@ -254,10 +249,12 @@
                 if (currentIndex > -1 && currentPlaylist[currentIndex]) {
                     const song = currentPlaylist[currentIndex];
-                    // Dr.Kun: 只更新UI，不获取URL，等待用户操作或后续逻辑
                     await updateCurrentSongInfo(song);
                     updateActiveItem();
-                    // Dr.Kun: 关键一步 - 设置音频源，以便后续恢复进度
                     const quality = qualitySelect.value;
                     const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
                     const urlData = await urlResponse.json();
@@ -274,7 +271,6 @@
             }
         }
-        // Dr.Kun: 页面加载时执行的初始化函数
         async function initializeApp() {
             if (window.innerWidth >= 1200) {
                 document.getElementById('searchView').classList.add('active');
@@ -286,19 +282,15 @@
             await loadPlayerState();
-            // Dr.Kun: 监听器
             qualitySelect.onchange = savePlayerState;
             sourceSelect.onchange = savePlayerState;
-            // Dr.Kun: 核心升级 - 在页面卸载前做最后一次保存
             window.addEventListener('beforeunload', savePlayerState);
-            // Dr.Kun: 核心升级 - 定期保存进度
-            setInterval(savePlayerState, 5000);
         }
-        // ... (其他函数基本不变，除了setVolume增加一个参数) ...
-        function setVolume(value, shouldSave = true) { // Dr.Kun: 增加一个参数判断是否需要保存
             audioPlayer.volume = value / 100;
             const volumeIcon = document.querySelector('.volume-icon');
             if (value == 0) volumeIcon.className = 'fas fa-volume-mute volume-icon';
@@ -312,13 +304,16 @@
         async function playSong(index) {
             if (index < 0 || index >= currentPlaylist.length) return;
             currentIndex = index;
-            timeToRestore = 0; // Dr.Kun: 用户主动切歌，不再需要恢复旧进度
             const song = currentPlaylist[index];
             await updateCurrentSongInfo(song);
             updateActiveItem();
-            // ... (playSong的后续逻辑不变)
             try {
                 showNotification('正在加载音乐...', 'info');
                 const quality = qualitySelect.value;
                 const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
                 const urlData = await urlResponse.json();
@@ -326,15 +321,12 @@
                 if (urlData && urlData.url) {
                     audioPlayer.src = urlData.url;
                     audioPlayer.load();
-                    loadLyrics(song);
                     document.getElementById('downloadSongBtn').disabled = false;
                     document.getElementById('downloadLyricBtn').disabled = false;
                     const playPromise = audioPlayer.play();
                     if (playPromise !== undefined) {
-                        playPromise.then(() => {
-                            showNotification(`开始播放: ${song.name}`, 'success');
-                        }).catch(error => {
                             showNotification('自动播放失败，请手动点击播放', 'warning');
                         });
                     }
@@ -347,28 +339,80 @@
             }
         }
-        // Dr.Kun: 核心升级 - 在元数据加载后恢复播放进度
         audioPlayer.addEventListener('loadedmetadata', () => {
             totalTimeSpan.textContent = formatTime(audioPlayer.duration);
             if (timeToRestore > 0 && timeToRestore < audioPlayer.duration) {
                 audioPlayer.currentTime = timeToRestore;
-                timeToRestore = 0; // Dr.Kun: 恢复后立即清零，避免影响下次播放
-                updateProgress(); // 立即更新一次进度条显示
                 showNotification('已恢复上次播放进度', 'info');
             }
         });
-        // Dr.Kun: 保持其他事件监听和函数不变
         audioPlayer.addEventListener('play', () => { isPlaying = true; updatePlayButton(); currentCover.classList.add('playing'); });
-        audioPlayer.addEventListener('pause', () => { isPlaying = false; updatePlayButton(); currentCover.classList.remove('playing'); savePlayerState(); }); // Dr.Kun: 暂停时也保存一下
         audioPlayer.addEventListener('ended', nextSong);
         setInterval(updateProgress, 500);
         searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchMusic(); });
         document.addEventListener('keydown', (e) => { if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; const keyMap = { ' ': togglePlay, 'ArrowRight': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 5, audioPlayer.duration); }, 'ArrowLeft': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 5, 0); }, 'ArrowUp': () => { const v = Math.min(parseInt(volumeSlider.value) + 5, 100); volumeSlider.value = v; setVolume(v); }, 'ArrowDown': () => { const v = Math.max(parseInt(volumeSlider.value) - 5, 0); volumeSlider.value = v; setVolume(v); }, 'n': nextSong, 'N': nextSong, 'p': previousSong, 'P': previousSong }; if (keyMap[e.key]) { e.preventDefault(); keyMap[e.key](); } });
-        function switchView(viewId, navItem) { document.querySelectorAll('.view-container').forEach(view => view.classList.remove('active')); document.getElementById(viewId).classList.add('active'); if (navItem) { document.querySelectorAll('.mobile-nav-item').forEach(item => item.classList.remove('active')); navItem.classList.add('active'); } }
-        async function searchMusic() { const keyword = searchInput.value.trim(); const source = sourceSelect.value; if (!keyword) { showNotification('请输入搜索关键词', 'warning'); return; } const resultsContainer = document.getElementById('searchResults'); resultsContainer.innerHTML = `<div class="loading"><i class="fas fa-spinner"></i><div>正在搜索音乐...</div></div>`; try { const response = await fetch(`${API_BASE}?types=search&source=${source}&name=${encodeURIComponent(keyword)}&count=30`); const data = await response.json(); if (data && data.length > 0) { currentPlaylist = data; currentIndex = -1; displaySearchResults(data); savePlayerState(); } else { resultsContainer.innerHTML = `<div class="error"><i class="fas fa-exclamation-triangle"></i><div>未找到相关歌曲</div></div>`; } } catch (error) { console.error('搜索失败:', error); resultsContainer.innerHTML = `<div class="error"><i class="fas fa-wifi"></i><div>网络连接失败</div></div>`; } }
-        async function getAlbumCoverUrl(song, size = 300) { if (!song || !song.pic_id) { return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } try { const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`); const data = await response.json(); return (data && data.url) ? data.url : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } catch (error) { console.error('获取专辑图失败:', error); return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; } }
-        function displaySearchResults(songs) { const resultsContainer = document.getElementById('searchResults'); resultsContainer.innerHTML = ''; songs.forEach((song, index) => { const songCard = document.createElement('div'); songCard.className = 'song-card'; songCard.onclick = () => playSong(index); const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist; songCard.innerHTML = ` <div class="song-index">${(index + 1).toString().padStart(2, '0')}</div> <div class="song-info"> <div class="song-name">${song.name}</div> <div class="song-artist">${artistText} ${song.album ? '· ' + song.album : ''}</div> </div> <div class="song-actions"> <button class="action-btn" onclick="event.stopPropagation(); downloadSong(${index})" title="下载音乐"><i class="fas fa-download"></i></button> <button class="action-btn" onclick="event.stopPropagation(); downloadLyric(${index})" title="下载歌词"><i class="fas fa-file-text"></i></button> </div>`; resultsContainer.appendChild(songCard); }); }
         async function downloadSong(index) { const song = currentPlaylist[index]; const quality = qualitySelect.value; try { showNotification('正在获取下载链接...', 'info'); const response = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`); const data = await response.json(); if (data && data.url) { const link = document.createElement('a'); link.href = data.url; link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.mp3`; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); showNotification('开始下载音乐文件', 'success'); } else { showNotification('无法获取下载链接', 'error'); } } catch (error) { console.error('下载失败:', error); showNotification('下载失败，请稍后重试', 'error'); } }
         async function downloadLyric(index) { const song = currentPlaylist[index]; try { showNotification('正在获取歌词...', 'info'); const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`); const data = await response.json(); if (data && data.lyric) { let lyricContent = `歌曲：${song.name}\r\n歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n专辑：${song.album}\r\n\r\n${data.lyric}`; if (data.tlyric) lyricContent += `\r\n\r\n=== 翻译 ===\r\n${data.tlyric}`; const blob = new Blob([lyricContent], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.lrc`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); showNotification('歌词下载完成', 'success'); } else { showNotification('该歌曲暂无歌词', 'warning'); } } catch (error) { console.error('下载歌词失败:', error); showNotification('下载歌词失败，请稍后重试', 'error'); } }
         async function downloadCurrentSong() { if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; } await downloadSong(currentIndex); }
@@ -378,18 +422,140 @@
         function updatePlayButton() { playBtn.querySelector('i').className = isPlaying ? 'fas fa-pause' : 'fas fa-play'; }
         function togglePlay() { if (!audioPlayer.src) { showNotification('请先选择一首歌曲', 'warning'); return; } if (isPlaying) { audioPlayer.pause(); } else { audioPlayer.play().catch(e => console.error("播放命令被拒绝", e)); } }
         function seekTo(event) { if(!audioPlayer.duration) return; const progressBar = event.currentTarget; const rect = progressBar.getBoundingClientRect(); audioPlayer.currentTime = ((event.clientX - rect.left) / rect.width) * audioPlayer.duration; }
-        async function loadLyrics(song) { try { const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`); const data = await response.json(); let lyrics = []; if (data && data.lyric) { lyrics = parseLyrics(data.lyric); if (data.tlyric) { const tLyrics = parseLyrics(data.tlyric); mergeLyrics(lyrics, tLyrics); } } displayLyrics(lyrics); } catch (error) { console.error('加载歌词失败:', error); lyricsContainer.innerHTML = '<div class="lyric-line">加载歌词失败</div>'; } }
-        function parseLyrics(lyricText) { const lines = lyricText.split('\n'); const lyrics = []; const timeRegex = /\[(\d{2}):(\d{2})[.:](\d{2,3})\]/g; for (const line of lines) { if (!line.trim()) continue; let text = line.replace(timeRegex, '').trim(); if (text) { let match; timeRegex.lastIndex = 0; while ((match = timeRegex.exec(line)) !== null) { const timeInSeconds = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / (match[3].length === 3 ? 1000 : 100); lyrics.push({ time: timeInSeconds, text: text }); } } } return lyrics.sort((a, b) => a.time - b.time); }
-        function mergeLyrics(originalLyrics, translatedLyrics) { const translatedMap = new Map(translatedLyrics.map(l => [Math.round(l.time * 10), l.text])); originalLyrics.forEach(l => { const key = Math.round(l.time * 10); const translatedText = translatedMap.get(key); if (translatedText) { l.text += `<br><span style="color: #adb5bd; font-size: 0.9em;">${translatedText}</span>`; } }); }
-        function displayLyrics(lyrics) { lyricsContainer.innerHTML = lyrics.length === 0 ? '<div class="lyric-line">暂无歌词</div>' : ''; lyrics.forEach(lyric => { const line = document.createElement('div'); line.className = 'lyric-line'; line.innerHTML = lyric.text; line.setAttribute('data-time', lyric.time); line.onclick = () => { if(audioPlayer.duration) audioPlayer.currentTime = lyric.time; }; lyricsContainer.appendChild(line); }); }
-        function updateProgress() { if (audioPlayer.duration) { progressFill.style.width = `${(audioPlayer.currentTime / audioPlayer.duration) * 100}%`; currentTimeSpan.textContent = formatTime(audioPlayer.currentTime); highlightCurrentLyric(); } }
-        function formatTime(seconds) { const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60); return `${min}:${sec.toString().padStart(2, '0')}`; }
-        function highlightCurrentLyric() { const currentTime = audioPlayer.currentTime; const lyricLines = document.querySelectorAll('.lyric-line'); if (lyricLines.length === 0 || lyricsContainer.offsetParent === null) return; let activeIndex = -1; for (let i = lyricLines.length - 1; i >= 0; i--) { if (parseFloat(lyricLines[i].getAttribute('data-time')) <= currentTime + 0.2) { activeIndex = i; break; } } lyricLines.forEach((line, index) => { if (line.classList.contains('active') !== (index === activeIndex)) { line.classList.toggle('active', index === activeIndex); } }); if (activeIndex > -1) { const activeLine = lyricLines[activeIndex]; const scrollPosition = activeLine.offsetTop - lyricsContainer.clientHeight / 2 + activeLine.clientHeight / 2; lyricsContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' }); } }
-        function showNotification(message, type = 'info') { const existing = document.querySelector('.custom-notification'); if (existing) existing.remove(); const notification = document.createElement('div'); notification.className = `custom-notification notification-${type}`; const icons = { info: 'info-circle', success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle' }; notification.innerHTML = `<i class="fas fa-${icons[type]}"></i><span>${message}</span>`; document.body.appendChild(notification); Object.assign(notification.style, { position: 'fixed', bottom: '20px', right: '20px', padding: '12px 20px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '14px', zIndex: '9999', transition: 'all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)', transform: 'translateY(100px)', opacity: '0' }); const colors = { success: { bg: 'rgba(40, 167, 69, 0.9)', color: '#fff' }, error: { bg: 'rgba(220, 53, 69, 0.9)', color: '#fff' }, warning: { bg: 'rgba(255, 193, 7, 0.9)', color: '#212529' }, info: { bg: 'rgba(74, 144, 226, 0.9)', color: '#fff' } }; notification.style.backgroundColor = colors[type].bg; notification.style.color = colors[type].color; setTimeout(() => { notification.style.transform = 'translateY(0)'; notification.style.opacity = '1'; }, 50); setTimeout(() => { notification.style.transform = 'translateY(100px)'; notification.style.opacity = '0'; setTimeout(() => notification.remove(), 400); }, 3000); }
-        function previousSong() { if (currentPlaylist.length === 0) return; currentIndex = (currentIndex - 1 + currentPlaylist.length) % currentPlaylist.length; playSong(currentIndex); }
-        function nextSong() { if (currentPlaylist.length === 0) return; currentIndex = (currentIndex + 1) % currentPlaylist.length; playSong(currentIndex); }
-        // Dr.Kun: 启动应用
         initializeApp();
     </script>
 </body>

     <title>云音乐 - 在线音乐播放器</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #f8f9fa; color: #333; overflow-x: hidden; line-height: 1.6; }
         .navbar { background: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
     </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="nav-container">
             <div class="logo"><i class="fas fa-music"></i><span>云音乐</span></div>
     <script>
         // Dr.Kun: 常量和全局变量
         const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
+        const PLAYER_STATE_KEY = 'cloudMusicPlayerState_v3';
         let currentPlaylist = [];
         let currentIndex = -1;
         let isPlaying = false;
+        let timeToRestore = 0;
         // Dr.Kun: DOM元素缓存
         const audioPlayer = document.getElementById('audioPlayer');
         const volumeSlider = document.getElementById('volumeSlider');
         const searchInput = document.getElementById('searchInput');
         function savePlayerState() {
+            if (currentIndex === -1) return; // 如果没有歌曲，则不保存
             const state = {
                 playlist: currentPlaylist,
                 index: currentIndex,
                 volume: audioPlayer.volume,
                 quality: qualitySelect.value,
                 source: sourceSelect.value,
+                currentTime: audioPlayer.currentTime > 1 ? audioPlayer.currentTime : 0
             };
             try {
                 localStorage.setItem(PLAYER_STATE_KEY, JSON.stringify(state));
+            } catch (e) { console.error("保存状态失败:", e); }
         }
         async function loadPlayerState() {
             try {
                 const savedState = localStorage.getItem(PLAYER_STATE_KEY);
                 const state = JSON.parse(savedState);
                 currentPlaylist = state.playlist || [];
+                currentIndex = state.index !== undefined ? state.index : -1;
+                timeToRestore = state.currentTime || 0;
                 qualitySelect.value = state.quality || '320';
                 sourceSelect.value = state.source || 'netease';
                 const volumeValue = (state.volume !== undefined ? state.volume : 0.8) * 100;
                 volumeSlider.value = volumeValue;
+                setVolume(volumeValue, false);
                 if (currentPlaylist.length > 0) {
                     displaySearchResults(currentPlaylist);
                 if (currentIndex > -1 && currentPlaylist[currentIndex]) {
                     const song = currentPlaylist[currentIndex];
                     await updateCurrentSongInfo(song);
                     updateActiveItem();
+                    lyricsContainer.innerHTML = `<div class="loading"><i class="fas fa-spinner"></i><div>正在加载歌词...</div></div>`;
+                    await loadLyrics(song);
                     const quality = qualitySelect.value;
                     const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
                     const urlData = await urlResponse.json();
             }
         }
         async function initializeApp() {
             if (window.innerWidth >= 1200) {
                 document.getElementById('searchView').classList.add('active');
             await loadPlayerState();
             qualitySelect.onchange = savePlayerState;
             sourceSelect.onchange = savePlayerState;
             window.addEventListener('beforeunload', savePlayerState);
+            setInterval(() => {
+                if (isPlaying) savePlayerState();
+            }, 5000);
         }
+        function setVolume(value, shouldSave = true) {
             audioPlayer.volume = value / 100;
             const volumeIcon = document.querySelector('.volume-icon');
             if (value == 0) volumeIcon.className = 'fas fa-volume-mute volume-icon';
         async function playSong(index) {
             if (index < 0 || index >= currentPlaylist.length) return;
             currentIndex = index;
+            timeToRestore = 0;
             const song = currentPlaylist[index];
             await updateCurrentSongInfo(song);
             updateActiveItem();
             try {
                 showNotification('正在加载音乐...', 'info');
+                lyricsContainer.innerHTML = `<div class="loading"><i class="fas fa-spinner"></i><div>正在加载歌词...</div></div>`;
+                await loadLyrics(song);
                 const quality = qualitySelect.value;
                 const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
                 const urlData = await urlResponse.json();
                 if (urlData && urlData.url) {
                     audioPlayer.src = urlData.url;
                     audioPlayer.load();
                     document.getElementById('downloadSongBtn').disabled = false;
                     document.getElementById('downloadLyricBtn').disabled = false;
                     const playPromise = audioPlayer.play();
                     if (playPromise !== undefined) {
+                        playPromise.catch(error => {
                             showNotification('自动播放失败，请手动点击播放', 'warning');
                         });
                     }
             }
         }
         audioPlayer.addEventListener('loadedmetadata', () => {
             totalTimeSpan.textContent = formatTime(audioPlayer.duration);
             if (timeToRestore > 0 && timeToRestore < audioPlayer.duration) {
                 audioPlayer.currentTime = timeToRestore;
+                timeToRestore = 0;
+                updateProgress();
                 showNotification('已恢复上次播放进度', 'info');
             }
         });
         audioPlayer.addEventListener('play', () => { isPlaying = true; updatePlayButton(); currentCover.classList.add('playing'); });
+        audioPlayer.addEventListener('pause', () => { isPlaying = false; updatePlayButton(); currentCover.classList.remove('playing'); savePlayerState(); });
         audioPlayer.addEventListener('ended', nextSong);
         setInterval(updateProgress, 500);
         searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchMusic(); });
         document.addEventListener('keydown', (e) => { if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; const keyMap = { ' ': togglePlay, 'ArrowRight': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.min(audioPlayer.currentTime + 5, audioPlayer.duration); }, 'ArrowLeft': () => { if(audioPlayer.duration) audioPlayer.currentTime = Math.max(audioPlayer.currentTime - 5, 0); }, 'ArrowUp': () => { const v = Math.min(parseInt(volumeSlider.value) + 5, 100); volumeSlider.value = v; setVolume(v); }, 'ArrowDown': () => { const v = Math.max(parseInt(volumeSlider.value) - 5, 0); volumeSlider.value = v; setVolume(v); }, 'n': nextSong, 'N': nextSong, 'p': previousSong, 'P': previousSong }; if (keyMap[e.key]) { e.preventDefault(); keyMap[e.key](); } });
+        function switchView(viewId, navItem) {
+            document.querySelectorAll('.view-container').forEach(view => view.classList.remove('active'));
+            document.getElementById(viewId).classList.add('active');
+            if (navItem) {
+                document.querySelectorAll('.mobile-nav-item').forEach(item => item.classList.remove('active'));
+                navItem.classList.add('active');
+            }
+        }
+        async function searchMusic() {
+            const keyword = searchInput.value.trim();
+            const source = sourceSelect.value;
+            if (!keyword) { showNotification('请输入搜索关键词', 'warning'); return; }
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = `<div class="loading"><i class="fas fa-spinner"></i><div>正在搜索音乐...</div></div>`;
+            try {
+                const response = await fetch(`${API_BASE}?types=search&source=${source}&name=${encodeURIComponent(keyword)}&count=30`);
+                const data = await response.json();
+                if (data && data.length > 0) {
+                    currentPlaylist = data;
+                    currentIndex = -1;
+                    displaySearchResults(data);
+                    savePlayerState();
+                } else {
+                    resultsContainer.innerHTML = `<div class="error"><i class="fas fa-exclamation-triangle"></i><div>未找到相关歌曲</div></div>`;
+                }
+            } catch (error) {
+                console.error('搜索失败:', error);
+                resultsContainer.innerHTML = `<div class="error"><i class="fas fa-wifi"></i><div>网络连接失败</div></div>`;
+            }
+        }
+        async function getAlbumCoverUrl(song, size = 300) {
+            if (!song || !song.pic_id) { return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+'; }
+            try {
+                const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
+                const data = await response.json();
+                return (data && data.url) ? data.url : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+';
+            } catch (error) {
+                console.error('获取专辑图失败:', error);
+                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+';
+            }
+        }
+        function displaySearchResults(songs) {
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = '';
+            songs.forEach((song, index) => {
+                const songCard = document.createElement('div');
+                songCard.className = 'song-card';
+                songCard.onclick = () => playSong(index);
+                const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
+                songCard.innerHTML = ` <div class="song-index">${(index + 1).toString().padStart(2, '0')}</div> <div class="song-info"> <div class="song-name">${song.name}</div> <div class="song-artist">${artistText} ${song.album ? '· ' + song.album : ''}</div> </div> <div class="song-actions"> <button class="action-btn" onclick="event.stopPropagation(); downloadSong(${index})" title="下载音乐"><i class="fas fa-download"></i></button> <button class="action-btn" onclick="event.stopPropagation(); downloadLyric(${index})" title="下载歌词"><i class="fas fa-file-text"></i></button> </div>`;
+                resultsContainer.appendChild(songCard);
+            });
+        }
         async function downloadSong(index) { const song = currentPlaylist[index]; const quality = qualitySelect.value; try { showNotification('正在获取下载链接...', 'info'); const response = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`); const data = await response.json(); if (data && data.url) { const link = document.createElement('a'); link.href = data.url; link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.mp3`; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); showNotification('开始下载音乐文件', 'success'); } else { showNotification('无法获取下载链接', 'error'); } } catch (error) { console.error('下载失败:', error); showNotification('下载失败，请稍后重试', 'error'); } }
         async function downloadLyric(index) { const song = currentPlaylist[index]; try { showNotification('正在获取歌词...', 'info'); const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`); const data = await response.json(); if (data && data.lyric) { let lyricContent = `歌曲：${song.name}\r\n歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n专辑：${song.album}\r\n\r\n${data.lyric}`; if (data.tlyric) lyricContent += `\r\n\r\n=== 翻译 ===\r\n${data.tlyric}`; const blob = new Blob([lyricContent], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.lrc`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); showNotification('歌词下载完成', 'success'); } else { showNotification('该歌曲暂无歌词', 'warning'); } } catch (error) { console.error('下载歌词失败:', error); showNotification('下载歌词失败，请稍后重试', 'error'); } }
         async function downloadCurrentSong() { if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; } await downloadSong(currentIndex); }
         function updatePlayButton() { playBtn.querySelector('i').className = isPlaying ? 'fas fa-pause' : 'fas fa-play'; }
         function togglePlay() { if (!audioPlayer.src) { showNotification('请先选择一首歌曲', 'warning'); return; } if (isPlaying) { audioPlayer.pause(); } else { audioPlayer.play().catch(e => console.error("播放命令被拒绝", e)); } }
         function seekTo(event) { if(!audioPlayer.duration) return; const progressBar = event.currentTarget; const rect = progressBar.getBoundingClientRect(); audioPlayer.currentTime = ((event.clientX - rect.left) / rect.width) * audioPlayer.duration; }
+        async function loadLyrics(song) {
+            try {
+                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
+                const data = await response.json();
+                let lyrics = [];
+                if (data && data.lyric) {
+                    lyrics = parseLyrics(data.lyric);
+                    if (data.tlyric) {
+                        const tLyrics = parseLyrics(data.tlyric);
+                        mergeLyrics(lyrics, tLyrics);
+                    }
+                }
+                displayLyrics(lyrics);
+            } catch (error) {
+                console.error('加载歌词失败:', error);
+                lyricsContainer.innerHTML = '<div class="lyric-line">加载歌词失败</div>';
+            }
+        }
+        function parseLyrics(lyricText) {
+            const lines = lyricText.split('\n');
+            const lyrics = [];
+            const timeRegex = /\[(\d{2}):(\d{2})[.:](\d{2,3})\]/g;
+            for (const line of lines) {
+                if (!line.trim()) continue;
+                let text = line.replace(timeRegex, '').trim();
+                if (text) {
+                    let match;
+                    timeRegex.lastIndex = 0;
+                    while ((match = timeRegex.exec(line)) !== null) {
+                        const timeInSeconds = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / (match[3].length === 3 ? 1000 : 100);
+                        lyrics.push({ time: timeInSeconds, text: text });
+                    }
+                }
+            }
+            return lyrics.sort((a, b) => a.time - b.time);
+        }
+        function mergeLyrics(originalLyrics, translatedLyrics) {
+            const translatedMap = new Map(translatedLyrics.map(l => [Math.round(l.time * 10), l.text]));
+            originalLyrics.forEach(l => {
+                const key = Math.round(l.time * 10);
+                const translatedText = translatedMap.get(key);
+                if (translatedText) {
+                    l.text += `<br><span style="color: #adb5bd; font-size: 0.9em;">${translatedText}</span>`;
+                }
+            });
+        }
+        function displayLyrics(lyrics) {
+            lyricsContainer.innerHTML = lyrics.length === 0 ? '<div class="lyric-line">暂无歌词</div>' : '';
+            lyrics.forEach(lyric => {
+                const line = document.createElement('div');
+                line.className = 'lyric-line';
+                line.innerHTML = lyric.text;
+                line.setAttribute('data-time', lyric.time);
+                line.onclick = () => { if(audioPlayer.duration) audioPlayer.currentTime = lyric.time; };
+                lyricsContainer.appendChild(line);
+            });
+        }
+        function updateProgress() {
+            if (audioPlayer.duration) {
+                progressFill.style.width = `${(audioPlayer.currentTime / audioPlayer.duration) * 100}%`;
+                currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
+                highlightCurrentLyric();
+            }
+        }
+        function formatTime(seconds) {
+            const min = Math.floor(seconds / 60);
+            const sec = Math.floor(seconds % 60);
+            return `${min}:${sec.toString().padStart(2, '0')}`;
+        }
+        function highlightCurrentLyric() {
+            const currentTime = audioPlayer.currentTime;
+            const lyricLines = document.querySelectorAll('.lyric-line');
+            if (lyricLines.length === 0 || lyricsContainer.offsetParent === null) return;
+            let activeIndex = -1;
+            for (let i = lyricLines.length - 1; i >= 0; i--) {
+                if (parseFloat(lyricLines[i].getAttribute('data-time')) <= currentTime + 0.2) {
+                    activeIndex = i;
+                    break;
+                }
+            }
+            lyricLines.forEach((line, index) => {
+                if (line.classList.contains('active') !== (index === activeIndex)) {
+                    line.classList.toggle('active', index === activeIndex);
+                }
+            });
+            if (activeIndex > -1) {
+                const activeLine = lyricLines[activeIndex];
+                const scrollPosition = activeLine.offsetTop - lyricsContainer.clientHeight / 2 + activeLine.clientHeight / 2;
+                lyricsContainer.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+            }
+        }
+        function showNotification(message, type = 'info') {
+            const existing = document.querySelector('.custom-notification');
+            if (existing) existing.remove();
+            const notification = document.createElement('div');
+            notification.className = `custom-notification notification-${type}`;
+            const icons = { info: 'info-circle', success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle' };
+            notification.innerHTML = `<i class="fas fa-${icons[type]}"></i><span>${message}</span>`;
+            document.body.appendChild(notification);
+            Object.assign(notification.style, { position: 'fixed', bottom: '20px', right: '20px', padding: '12px 20px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '10px', fontSize: '14px', zIndex: '9999', transition: 'all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)', transform: 'translateY(100px)', opacity: '0' });
+            const colors = { success: { bg: 'rgba(40, 167, 69, 0.9)', color: '#fff' }, error: { bg: 'rgba(220, 53, 69, 0.9)', color: '#fff' }, warning: { bg: 'rgba(255, 193, 7, 0.9)', color: '#212529' }, info: { bg: 'rgba(74, 144, 226, 0.9)', color: '#fff' } };
+            notification.style.backgroundColor = colors[type].bg;
+            notification.style.color = colors[type].color;
+            setTimeout(() => {
+                notification.style.transform = 'translateY(0)';
+                notification.style.opacity = '1';
+            }, 50);
+            setTimeout(() => {
+                notification.style.transform = 'translateY(100px)';
+                notification.style.opacity = '0';
+                setTimeout(() => notification.remove(), 400);
+            }, 3000);
+        }
+        function previousSong() {
+            if (currentPlaylist.length === 0) return;
+            currentIndex = (currentIndex - 1 + currentPlaylist.length) % currentPlaylist.length;
+            playSong(currentIndex);
+        }
+        function nextSong() {
+            if (currentPlaylist.length === 0) return;
+            currentIndex = (currentIndex + 1) % currentPlaylist.length;
+            playSong(currentIndex);
+        }
         initializeApp();
     </script>
 </body>