Spaces:

Kicool
/

cloudyy

Running

App Files Files Community

xukunCai commited on Oct 7

Commit

1504438

verified ·

1 Parent(s): 1572821

Update index.html

Browse files

Files changed (1) hide show

index.html +212 -441

index.html CHANGED Viewed

@@ -757,7 +757,6 @@
     </style>
 </head>
 <body>
-    <!-- 顶部导航 -->
     <nav class="navbar">
         <div class="nav-container">
             <div class="logo">
@@ -791,10 +790,8 @@
         </div>
     </nav>
-    <!-- 主要内容 -->
     <div class="main-container">
         <div class="desktop-layout">
-            <!-- 搜索结果视图 -->
             <div class="view-container" id="searchView">
                 <div class="content-panel">
                     <h2 class="panel-title">
@@ -810,7 +807,6 @@
                 </div>
             </div>
-            <!-- 播放器视图 -->
             <div class="view-container" id="playerView">
                 <div class="content-panel player-panel">
                     <div class="current-song">
@@ -845,7 +841,6 @@
                         </div>
                     </div>
-                    <!-- 音质选择 -->
                     <div class="quality-container">
                         <div class="quality-label">
                             <i class="fas fa-music"></i>
@@ -865,7 +860,6 @@
                         <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" onchange="setVolume(this.value)">
                     </div>
-                    <!-- 下载区域 -->
                     <div class="download-container">
                         <button class="download-btn" onclick="downloadCurrentSong()" id="downloadSongBtn" disabled>
                             <i class="fas fa-download"></i>
@@ -881,7 +875,6 @@
                 </div>
             </div>
-            <!-- 歌词视图 -->
             <div class="view-container" id="lyricsView">
                 <div class="content-panel">
                     <h2 class="panel-title">
@@ -896,7 +889,6 @@
         </div>
     </div>
-    <!-- 移动端底部导航 -->
     <div class="mobile-nav">
         <div class="mobile-nav-items">
             <a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)">
@@ -915,12 +907,17 @@
     </div>
     <script>
         const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
         let currentPlaylist = [];
         let currentIndex = -1;
         let currentLyrics = [];
         let isPlaying = false;
         const audioPlayer = document.getElementById('audioPlayer');
         const playBtn = document.getElementById('playBtn');
         const progressFill = document.getElementById('progressFill');
@@ -928,113 +925,147 @@
         const totalTimeSpan = document.getElementById('totalTime');
         const lyricsContainer = document.getElementById('lyricsContainer');
         const currentCover = document.getElementById('currentCover');
-        // 初始化视图 - PC端显示所有视图，移动端只显示活动视图
-        if (window.innerWidth >= 1200) {
-            document.getElementById('searchView').classList.add('active');
-            document.getElementById('playerView').classList.add('active');
-            document.getElementById('lyricsView').classList.add('active');
-        } else {
-            switchView('searchView', document.querySelectorAll('.mobile-nav-item')[0]);
         }
         // 切换视图
         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 = document.getElementById('searchInput').value.trim();
-            const source = document.getElementById('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;
                     displaySearchResults(data);
                 } 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>
-                `;
             }
         }
-        // 获取专辑图片URL
         async function getAlbumCoverUrl(song, size = 300) {
-            if (!song.pic_id) {
-                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjI3LjUiIGN5PSIyNy41IiByPSIyMCIgZmlsbD0iI2Y4ZjlmYSIvPgo8cGF0aCBkPSJNMjcuNSAxOEwzNSAyNy41SDMwVjM3SDI1VjI3LjUyMEwyNy41IDE4WiIgZmlsbD0iIzRhOTBlMiIvPgo8L3N2Zz4=';
             }
             try {
                 const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
                 const data = await response.json();
-                if (data && data.url) {
-                    return data.url;
-                }
             } catch (error) {
                 console.error('获取专辑图失败:', error);
             }
-            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjI3LjUiIGN5PSIyNy41IiByPSIyMCIgZmlsbD0iI2Y4ZjlmYSIvPgo8cGF0aCBkPSJNMjcuNSAxOEwzNSAyNy41SDMwVjM3SDI1VjI3LjUyMEwyNy41IDE4WiIgZmlsbD0iIzRhOTBlMiIvPgo8L3N2Zz4=';
         }
-        // 显示搜索结果 - 卡片式布局
-        async function displaySearchResults(songs) {
             const resultsContainer = document.getElementById('searchResults');
             resultsContainer.innerHTML = '';
-            for (let index = 0; index < songs.length; index++) {
-                const song = songs[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">
@@ -1042,62 +1073,44 @@
                         <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 playSong(index) {
             if (index < 0 || index >= currentPlaylist.length) return;
             currentIndex = index;
             const song = currentPlaylist[index];
-            // 更新UI
             await updateCurrentSongInfo(song);
             updateActiveItem();
             try {
                 showNotification('正在加载音乐...', 'info');
-                // 获取当前选择的音质
-                const quality = document.getElementById('qualitySelect').value;
-                // 获取音乐URL
                 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();
-                    // 获取歌词
                     loadLyrics(song);
-                    // 启用下载按钮
                     document.getElementById('downloadSongBtn').disabled = false;
                     document.getElementById('downloadLyricBtn').disabled = false;
-                    // 自动播放
                     const playPromise = audioPlayer.play();
                     if (playPromise !== undefined) {
                         playPromise.then(() => {
                             isPlaying = true;
                             updatePlayButton();
                             currentCover.classList.add('playing');
-                            showNotification(`开始播放 (${getQualityText(urlData.br || quality)})`, 'success');
                         }).catch(error => {
                             console.error('播放失败:', error);
-                            showNotification('播放失败，请尝试其他歌曲', 'error');
                         });
                     }
                 } else {
@@ -1109,41 +1122,26 @@
             }
         }
-        // 获取音质文本
         function getQualityText(br) {
-            const qualityMap = {
-                '128': '标准音质',
-                '192': '较高音质',
-                '320': '高品质',
-                '740': '无损音质',
-                '999': 'Hi-Res音质'
-            };
             return qualityMap[br] || `${br}K`;
         }
-        // 下载歌曲
         async function downloadSong(index) {
             const song = currentPlaylist[index];
-            const quality = document.getElementById('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');
@@ -1154,41 +1152,23 @@
             }
         }
-        // 下载歌词
         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`;
-                    lyricContent += `歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n`;
-                    lyricContent += `专辑：${song.album}\r\n`;
-                    lyricContent += `来源：${song.source}\r\n\r\n`;
-                    lyricContent += data.lyric;
-                    if (data.tlyric) {
-                        lyricContent += '\r\n=== 翻译歌词 ===\r\n';
-                        lyricContent += data.tlyric;
-                    }
-                    // 创建Blob并下载
                     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 {
@@ -1200,446 +1180,237 @@
             }
         }
-        // 下载当前播放的歌曲
         async function downloadCurrentSong() {
-            if (currentIndex === -1) {
-                showNotification('请先选择要下载的歌曲', 'warning');
-                return;
-            }
             await downloadSong(currentIndex);
         }
-        // 下载当前播放的歌词
         async function downloadCurrentLyric() {
-            if (currentIndex === -1) {
-                showNotification('请先选择要下载歌词的歌曲', 'warning');
-                return;
-            }
             await downloadLyric(currentIndex);
         }
-        // 更新当前歌曲信息
         async function updateCurrentSongInfo(song) {
             document.getElementById('currentTitle').textContent = song.name;
             const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
-            document.getElementById('currentArtist').textContent =
-                `${artistText}${song.album ? ' · ' + song.album : ''}`;
-            // 获取专辑图片URL
-            const coverUrl = await getAlbumCoverUrl(song, 500);
-            currentCover.src = coverUrl;
         }
-        // 更新活跃项目
         function updateActiveItem() {
             document.querySelectorAll('.song-card').forEach((item, index) => {
                 item.classList.toggle('active', index === currentIndex);
             });
         }
-        // 更新播放按钮
         function updatePlayButton() {
-            const icon = playBtn.querySelector('i');
-            if (isPlaying) {
-                icon.className = 'fas fa-pause';
-            } else {
-                icon.className = 'fas fa-play';
-            }
         }
-        // 切换播放/暂停
         function togglePlay() {
-            if (audioPlayer.src) {
-                if (isPlaying) {
-                    audioPlayer.pause();
-                    currentCover.classList.remove('playing');
-                } else {
-                    audioPlayer.play();
-                    currentCover.classList.add('playing');
-                }
-                isPlaying = !isPlaying;
-                updatePlayButton();
             } else {
-                showNotification('请先选择要播放的歌曲', 'warning');
             }
         }
-        // 设置音量
         function setVolume(value) {
             audioPlayer.volume = value / 100;
             const volumeIcon = document.querySelector('.volume-icon');
-            if (value == 0) {
-                volumeIcon.className = 'fas fa-volume-mute volume-icon';
-            } else if (value < 50) {
-                volumeIcon.className = 'fas fa-volume-down volume-icon';
-            } else {
-                volumeIcon.className = 'fas fa-volume-up volume-icon';
-            }
         }
-        // 跳转到指定时间
         function seekTo(event) {
             const progressBar = event.currentTarget;
             const rect = progressBar.getBoundingClientRect();
-            const pos = (event.clientX - rect.left) / rect.width;
-            audioPlayer.currentTime = pos * 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();
                 if (data && data.lyric) {
                     currentLyrics = parseLyrics(data.lyric);
-                    displayLyrics(currentLyrics);
-                    // 如果有翻译歌词，也显示出来
                     if (data.tlyric) {
                         const tLyrics = parseLyrics(data.tlyric);
                         mergeLyrics(currentLyrics, tLyrics);
-                        displayLyrics(currentLyrics);
                     }
-                } else {
-                    lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
                 }
             } 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;
-                const times = [];
-                let text = line;
-                let match;
-                while ((match = timeRegex.exec(line)) !== null) {
-                    const minutes = parseInt(match[1], 10);
-                    const seconds = parseInt(match[2], 10);
-                    const milliseconds = match[3].length === 3 ? parseInt(match[3], 10) : parseInt(match[3], 10) * 10;
-                    const timeInSeconds = minutes * 6e4 + seconds * 1e3 + milliseconds;
-                    times.push(timeInSeconds);
-                    text = text.replace(match[0], '');
-                }
-                if (times.length > 0 && text.trim()) {
-                    for (const time of times) {
-                        lyrics.push({
-                            time: time / 1000,
-                            text: text.trim()
-                        });
                     }
                 }
             }
-            // 按时间排序
             return lyrics.sort((a, b) => a.time - b.time);
         }
-        // 合并歌词和翻译
         function mergeLyrics(originalLyrics, translatedLyrics) {
-            const timeMap = new Map();
-            // 先将原歌词放入Map
-            for (const lyric of originalLyrics) {
-                timeMap.set(Math.round(lyric.time * 10) / 10, {
-                    original: lyric.text,
-                    translated: ''
-                });
-            }
-            // 再合并翻译歌词
-            for (const lyric of translatedLyrics) {
-                const key = Math.round(lyric.time * 10) / 10;
-                if (timeMap.has(key)) {
-                    timeMap.get(key).translated = lyric.text;
                 }
-            }
-            // 清空原歌词数组
-            originalLyrics.length = 0;
-            // 将合并后的歌词放回原数组
-            for (const [time, texts] of timeMap) {
-                originalLyrics.push({
-                    time,
-                    text: texts.translated ? `${texts.original} (${texts.translated})` : texts.original
-                });
-            }
-            // 重新排序
-            originalLyrics.sort((a, b) => a.time - b.time);
         }
-        // 显示歌词
         function displayLyrics(lyrics) {
-            lyricsContainer.innerHTML = '';
-            if (lyrics.length === 0) {
-                lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
-                return;
-            }
-            for (const lyric of lyrics) {
                 const line = document.createElement('div');
                 line.className = 'lyric-line';
-                line.textContent = lyric.text;
                 line.setAttribute('data-time', lyric.time);
-                line.addEventListener('click', () => {
-                    audioPlayer.currentTime = lyric.time;
-                });
                 lyricsContainer.appendChild(line);
-            }
         }
-        // 更新进度条和歌词高亮
         function updateProgress() {
             if (audioPlayer.duration) {
-                const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-                progressFill.style.width = `${percent}%`;
-                // 更新时间显示
                 currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
-                totalTimeSpan.textContent = formatTime(audioPlayer.duration);
-                // 更新歌词高亮
                 highlightCurrentLyric();
             }
         }
-        // 格式化时间
         function formatTime(seconds) {
-            const minutes = Math.floor(seconds / 60);
-            const remainingSeconds = Math.floor(seconds % 60);
-            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
         }
-        // 高亮当前歌词并在容器内滚动
         function highlightCurrentLyric() {
             const currentTime = audioPlayer.currentTime;
             const lyricLines = document.querySelectorAll('.lyric-line');
-            const lyricsContainer = document.getElementById('lyricsContainer');
-            // 检查歌词容器是否可见
-            const isLyricsVisible = lyricsContainer.offsetParent !== null;
-            if (!isLyricsVisible) return;
-            let currentIndex = -1;
-            // 找到当前应该高亮的歌词行
-            for (let i = 0; i < lyricLines.length; i++) {
-                const lineTime = parseFloat(lyricLines[i].getAttribute('data-time'));
-                if (lineTime <= currentTime) {
-                    currentIndex = i;
-                } else {
                     break;
                 }
             }
-            // 更新歌词高亮状态
             lyricLines.forEach((line, index) => {
-                line.classList.toggle('active', index === currentIndex);
             });
-            // 只在有当前歌词且歌词容器可见时才滚动
-            if (currentIndex !== -1 && lyricLines[currentIndex]) {
-                // 计算歌词容器的中间位置
-                const containerHeight = lyricsContainer.clientHeight;
-                const lineHeight = lyricLines[currentIndex].offsetHeight;
-                const lineTop = lyricLines[currentIndex].offsetTop;
-                // 计算滚动位置使当前歌词居中
-                const scrollPosition = lineTop - containerHeight / 2 + lineHeight / 2;
-                // 在歌词容器内滚动，不影响整个页面
-                lyricsContainer.scrollTop = scrollPosition;
             }
         }
-        // 显示通知
         function showNotification(message, type = 'info') {
-            // 检查是否已有通知，如果有则移除
-            const existingNotification = document.querySelector('.custom-notification');
-            if (existingNotification) {
-                existingNotification.remove();
-            }
-            // 创建通知元素
             const notification = document.createElement('div');
             notification.className = `custom-notification notification-${type}`;
-            // 设置图标
-            let icon = 'info-circle';
-            if (type === 'success') icon = 'check-circle';
-            if (type === 'error') icon = 'exclamation-circle';
-            if (type === 'warning') icon = 'exclamation-triangle';
-            notification.innerHTML = `
-                <i class="fas fa-${icon}"></i>
-                <span>${message}</span>
-            `;
-            // 添加到页面
             document.body.appendChild(notification);
-            // 设置样式
-            notification.style.position = 'fixed';
-            notification.style.bottom = '20px';
-            notification.style.right = '20px';
-            notification.style.padding = '12px 20px';
-            notification.style.borderRadius = '8px';
-            notification.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
-            notification.style.display = 'flex';
-            notification.style.alignItems = 'center';
-            notification.style.gap = '10px';
-            notification.style.fontSize = '14px';
-            notification.style.zIndex = '9999';
-            notification.style.transition = 'all 0.3s ease';
-            notification.style.transform = 'translateY(100px)';
-            notification.style.opacity = '0';
-            // 根据类型设置颜色
-            if (type === 'success') {
-                notification.style.backgroundColor = 'rgba(40, 167, 69, 0.9)';
-                notification.style.color = '#fff';
-            } else if (type === 'error') {
-                notification.style.backgroundColor = 'rgba(220, 53, 69, 0.9)';
-                notification.style.color = '#fff';
-            } else if (type === 'warning') {
-                notification.style.backgroundColor = 'rgba(255, 193, 7, 0.9)';
-                notification.style.color = '#212529';
-            } else {
-                notification.style.backgroundColor = 'rgba(74, 144, 226, 0.9)';
-                notification.style.color = '#fff';
-            }
-            // 显示通知
             setTimeout(() => {
                 notification.style.transform = 'translateY(0)';
                 notification.style.opacity = '1';
-            }, 70);
-            // 3秒后移除通知
             setTimeout(() => {
                 notification.style.transform = 'translateY(100px)';
                 notification.style.opacity = '0';
-                setTimeout(() => {
-                    notification.remove();
-                }, 300);
             }, 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);
         }
-        // 音频播放结束事件
-        audioPlayer.addEventListener('ended', () => {
-            isPlaying = false;
-            updatePlayButton();
-            currentCover.classList.remove('playing');
-            // 如果有下一首歌，自动播放下一首
-            if (currentIndex < currentPlaylist.length - 1) {
-                nextSong();
-            }
-        });
-        // 音频元数据加载完成事件
         audioPlayer.addEventListener('loadedmetadata', () => {
             totalTimeSpan.textContent = formatTime(audioPlayer.duration);
         });
-        // 定期更新进度条
-        setInterval(updateProgress, 1000);
-        // 初始化音量图标
-        setVolume(document.getElementById('volumeSlider').value);
-        // 键盘快捷键
-        document.addEventListener('keydown', (e) => {
-            // 如果焦点在输入框中，则不触发快捷键
-            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
-                return;
-            }
-            switch (e.key) {
-                case ' ':
-                case 'Spacebar':
-                    e.preventDefault();
-                    togglePlay();
-                    break;
-                case 'ArrowRight':
-                    e.preventDefault();
-                    audioPlayer.currentTime += 5;
-                    break;
-                case 'ArrowLeft':
-                    e.preventDefault();
-                    audioPlayer.currentTime -= 5;
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    const volumeUp = Math.min(parseInt(document.getElementById('volumeSlider').value) + 5, 100);
-                    document.getElementById('volumeSlider').value = volumeUp;
-                    setVolume(volumeUp);
-                    break;
-                case 'ArrowDown':
-                    e.preventDefault();
-                    const volumeDown = Math.max(parseInt(document.getElementById('volumeSlider').value) - 5, 0);
-                    document.getElementById('volumeSlider').value = volumeDown;
-                    setVolume(volumeDown);
-                    break;
-                case 'n':
-                case 'N':
-                    e.preventDefault();
-                    nextSong();
-                    break;
-                case 'p':
-                case 'P':
-                    e.preventDefault();
-                    previousSong();
-                    break;
-            }
         });
-        // 搜索框回车事件
-        document.getElementById('searchInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                searchMusic();
-            }
         });
     </script>
 </body>
 </html>

     </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="nav-container">
             <div class="logo">
         </div>
     </nav>
     <div class="main-container">
         <div class="desktop-layout">
             <div class="view-container" id="searchView">
                 <div class="content-panel">
                     <h2 class="panel-title">
                 </div>
             </div>
             <div class="view-container" id="playerView">
                 <div class="content-panel player-panel">
                     <div class="current-song">
                         </div>
                     </div>
                     <div class="quality-container">
                         <div class="quality-label">
                             <i class="fas fa-music"></i>
                         <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" onchange="setVolume(this.value)">
                     </div>
                     <div class="download-container">
                         <button class="download-btn" onclick="downloadCurrentSong()" id="downloadSongBtn" disabled>
                             <i class="fas fa-download"></i>
                 </div>
             </div>
             <div class="view-container" id="lyricsView">
                 <div class="content-panel">
                     <h2 class="panel-title">
         </div>
     </div>
     <div class="mobile-nav">
         <div class="mobile-nav-items">
             <a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)">
     </div>
     <script>
+        // Dr.Kun: 常量定义
         const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
+        const PLAYER_STATE_KEY = 'cloudMusicPlayerState_v1'; // Dr.Kun: 定义统一的localStorage Key
+        // Dr.Kun: 全局状态变量
         let currentPlaylist = [];
         let currentIndex = -1;
         let currentLyrics = [];
         let isPlaying = false;
+        // Dr.Kun: DOM元素缓存
         const audioPlayer = document.getElementById('audioPlayer');
         const playBtn = document.getElementById('playBtn');
         const progressFill = document.getElementById('progressFill');
         const totalTimeSpan = document.getElementById('totalTime');
         const lyricsContainer = document.getElementById('lyricsContainer');
         const currentCover = document.getElementById('currentCover');
+        const qualitySelect = document.getElementById('qualitySelect');
+        const sourceSelect = document.getElementById('sourceSelect');
+        const volumeSlider = document.getElementById('volumeSlider');
+        const searchInput = document.getElementById('searchInput');
+        // Dr.Kun: 新增 - 保存播放器状态到localStorage
+        function savePlayerState() {
+            const state = {
+                playlist: currentPlaylist,
+                index: currentIndex,
+                volume: audioPlayer.volume,
+                quality: qualitySelect.value,
+                source: sourceSelect.value,
+            };
+            try {
+                localStorage.setItem(PLAYER_STATE_KEY, JSON.stringify(state));
+            } catch (e) {
+                console.error("保存状态失败:", e);
+                showNotification("无法保存播放状态，可能是存储已满", "error");
+            }
+        }
+        // Dr.Kun: 新增 - 从localStorage加载播放器状态
+        async function loadPlayerState() {
+            try {
+                const savedState = localStorage.getItem(PLAYER_STATE_KEY);
+                if (savedState) {
+                    const state = JSON.parse(savedState);
+                    // 恢复状态
+                    currentPlaylist = state.playlist || [];
+                    currentIndex = state.index || -1;
+                    // 恢复UI
+                    qualitySelect.value = state.quality || '320';
+                    sourceSelect.value = state.source || 'netease';
+                    // 恢复音量 (注意: setVolume接受0-100的值)
+                    const volumeValue = (state.volume !== undefined ? state.volume : 0.8) * 100;
+                    volumeSlider.value = volumeValue;
+                    setVolume(volumeValue);
+                    // 如果有播放列表，则渲染
+                    if (currentPlaylist.length > 0) {
+                        displaySearchResults(currentPlaylist);
+                    }
+                    // 如果有当前播放的歌曲，则更新播放器信息（但不自动播放）
+                    if (currentIndex > -1 && currentPlaylist[currentIndex]) {
+                        await updateCurrentSongInfo(currentPlaylist[currentIndex]);
+                        updateActiveItem();
+                        document.getElementById('downloadSongBtn').disabled = false;
+                        document.getElementById('downloadLyricBtn').disabled = false;
+                    }
+                }
+            } catch (e) {
+                console.error("加载状态失败, 可能数据已损坏:", e);
+                localStorage.removeItem(PLAYER_STATE_KEY); // Dr.Kun: 如果数据损坏，则清除，避免下次继续出错
+            }
+        }
+        // Dr.Kun: 页面加载时执行的初始化函数
+        async function initializeApp() {
+            // 视图初始化
+            if (window.innerWidth >= 1200) {
+                document.getElementById('searchView').classList.add('active');
+                document.getElementById('playerView').classList.add('active');
+                document.getElementById('lyricsView').classList.add('active');
+            } else {
+                switchView('searchView', document.querySelectorAll('.mobile-nav-item')[0]);
+            }
+            // Dr.Kun: 关键步骤 - 加载上次保存的状态
+            await loadPlayerState();
+            // Dr.Kun: 为需要保存状态的控件添加事件监听
+            qualitySelect.onchange = savePlayerState;
+            sourceSelect.onchange = savePlayerState;
         }
         // 切换视图
         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; // Dr.Kun: 新的搜索重置当前播放索引
                     displaySearchResults(data);
+                    savePlayerState(); // Dr.Kun: 搜索成功后保存播放列表状态
                 } 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-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 playSong(index) {
             if (index < 0 || index >= currentPlaylist.length) return;
             currentIndex = index;
             const song = currentPlaylist[index];
             await updateCurrentSongInfo(song);
             updateActiveItem();
+            savePlayerState(); // Dr.Kun: 切换歌曲时保存状态
             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();
                 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(() => {
                             isPlaying = true;
                             updatePlayButton();
                             currentCover.classList.add('playing');
+                            showNotification(`开始播放: ${song.name}`, 'success');
                         }).catch(error => {
                             console.error('播放失败:', error);
+                            showNotification('自动播放失败，请手动点击播放', 'warning');
                         });
                     }
                 } else {
             }
         }
         function getQualityText(br) {
+            const qualityMap = { '128': '标准', '192': '较高', '320': '高品质', '740': '无损FLAC', '999': 'Hi-Res' };
             return qualityMap[br] || `${br}K`;
         }
         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');
             }
         }
         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 {
             }
         }
         async function downloadCurrentSong() {
+            if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; }
             await downloadSong(currentIndex);
         }
         async function downloadCurrentLyric() {
+            if (currentIndex === -1) { showNotification('请先选择歌曲', 'warning'); return; }
             await downloadLyric(currentIndex);
         }
         async function updateCurrentSongInfo(song) {
             document.getElementById('currentTitle').textContent = song.name;
             const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
+            document.getElementById('currentArtist').textContent = `${artistText}${song.album ? ' · ' + song.album : ''}`;
+            currentCover.src = await getAlbumCoverUrl(song, 500);
         }
         function updateActiveItem() {
             document.querySelectorAll('.song-card').forEach((item, index) => {
                 item.classList.toggle('active', index === 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();
+                currentCover.classList.remove('playing');
             } else {
+                audioPlayer.play().catch(e => console.error("播放命令被拒绝", e));
+                currentCover.classList.add('playing');
             }
+            isPlaying = !isPlaying;
+            updatePlayButton();
         }
         function setVolume(value) {
             audioPlayer.volume = value / 100;
             const volumeIcon = document.querySelector('.volume-icon');
+            if (value == 0) volumeIcon.className = 'fas fa-volume-mute volume-icon';
+            else if (value < 50) volumeIcon.className = 'fas fa-volume-down volume-icon';
+            else volumeIcon.className = 'fas fa-volume-up volume-icon';
+            savePlayerState(); // Dr.Kun: 调整音量后保存状态
         }
         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();
+                currentLyrics = []; // 清空旧歌词
                 if (data && data.lyric) {
                     currentLyrics = parseLyrics(data.lyric);
                     if (data.tlyric) {
                         const tLyrics = parseLyrics(data.tlyric);
                         mergeLyrics(currentLyrics, tLyrics);
                     }
                 }
+                displayLyrics(currentLyrics);
             } 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; // 使用innerHTML以渲染br标签
                 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) { // 增加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);
         }
+        audioPlayer.addEventListener('play', () => { isPlaying = true; updatePlayButton(); currentCover.classList.add('playing'); });
+        audioPlayer.addEventListener('pause', () => { isPlaying = false; updatePlayButton(); currentCover.classList.remove('playing'); });
+        audioPlayer.addEventListener('ended', nextSong);
         audioPlayer.addEventListener('loadedmetadata', () => {
             totalTimeSpan.textContent = formatTime(audioPlayer.duration);
         });
+        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](); }
         });
+        initializeApp();
     </script>
 </body>
 </html>