</pre> </section> <!-- 下载区域 --> <div class="download-section"> <div class="download-buttons"> <button class="download-btn" onclick="downloadLyric('lrc')"> 📥 下载LRC歌词 </button> <button class="download-btn" style="background: linear-gradient(135deg, #81C784 0%, #66BB6A 100%);" onclick="downloadLyric('txt')"> 📄 下载TXT歌词 </button> </div> <p class="download-tip">支持卡拉OK同步显示，可用记事本编辑</p> </div> </div> <!-- 音频播放器 --> <div class="audio-player" id="audioPlayer"> <div class="player-header"> <div class="player-info" id="playerInfo"> 正在播放: 爱的咒语 </div> <div class="player-actions"> <button class="player-action-btn" onclick="minimizePlayer()" title="最小化">➖</button> <button class="player-action-btn" onclick="togglePlayer()" title="关闭播放器">×</button> </div> </div> <div class="player-controls"> <button class="control-btn" onclick="togglePlay()" id="playPauseBtn">▶️</button> <div class="progress-bar" onclick="seekAudio(event)" id="progressBar"> <div class="progress" id="progress"></div> </div> <div class="time-display" id="timeDisplay">0:00 / 0:00</div> </div> <!-- 额外控制按钮 --> <div class="player-extra-controls"> <button class="extra-control-btn" onclick="toggleLoop()" id="loopBtn" title="循环播放"> 🔄 单曲循环 </button> <button class="extra-control-btn" onclick="toggleMute()" id="muteBtn" title="静音"> 🔊 音量 </button> </div> <!-- 歌词显示区域 --> <div class="lyrics-display" id="lyricsDisplay"> <div class="lyric-line">加载歌词中...</div> </div> <audio id="audioElement" preload="metadata"> <!-- 音频源将通过JavaScript设置 --> </audio> </div> <!-- 迷你播放条 --> <div class="mini-player" id="miniPlayer"> <div class="mini-player-info"> <div class="mini-player-title">爱的咒语</div> <div class="mini-player-artist">陈美龄</div> </div> <div class="mini-player-controls"> <button class="mini-player-btn" onclick="togglePlay()" id="miniPlayPauseBtn">▶️</button> <button class="mini-player-btn expand" onclick="expandPlayer()" title="展开播放器">⛶</button> </div> </div> <!-- 固定按钮组 --> <div class="fixed-buttons"> <button class="play-music-btn" onclick="togglePlayer()" id="playMusicBtn" title="播放音乐">🎵</button> <button class="back-to-top" onclick="scrollToTop()" title="返回顶部">↑</button> </div> <script> // 音频播放相关变量 let audio = null; let isPlaying = false; let playerVisible = false; let lyricsData = []; let currentLyricIndex = -1; let isLooping = false; let isMuted = false; let isMinimized = false; // 歌词切换功能 function showLyric(type) { document.querySelectorAll('.lyric-section').forEach(section => { section.style.display = 'none'; }); document.querySelectorAll('.switch-btn').forEach(btn => { btn.classList.remove('active'); }); const targetSection = document.getElementById(`${type}-lyric`); if (targetSection) { targetSection.style.display = 'block'; event.target.classList.add('active'); } } // 复制歌词功能 async function copyLyric(sectionId) { const lyricSection = document.getElementById(sectionId); const lyricContent = lyricSection.querySelector('.lyric-content'); const copyBtn = lyricSection.querySelector('.copy-btn'); const originalText = copyBtn.innerHTML; const text = lyricContent.innerText; try { await navigator.clipboard.writeText(text); // 显示复制成功反馈 copyBtn.innerHTML = '<span>✅</span> 已复制'; copyBtn.classList.add('copied'); // 2秒后恢复原状 setTimeout(() => { copyBtn.innerHTML = originalText; copyBtn.classList.remove('copied'); }, 2000); } catch (err) { console.error('复制失败:', err); // 备用复制方法 const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); // 显示复制成功反馈 copyBtn.innerHTML = '<span>✅</span> 已复制'; copyBtn.classList.add('copied'); setTimeout(() => { copyBtn.innerHTML = originalText; copyBtn.classList.remove('copied'); }, 2000); } catch (err2) { console.error('备用复制方法也失败:', err2); alert('复制失败，请手动选择文本复制'); } document.body.removeChild(textArea); } } // 下载歌词功能 function downloadLyric(type) { let content = ''; let filename = ''; const songName = '爱的咒语'; const artistName = '陈美龄'; switch(type) { case 'lrc': content = document.querySelector('#lrc-lyric .lyric-content').innerText; filename = `${songName}-${artistName}.lrc`; break; case 'txt': content = document.querySelector('#plain-lyric .lyric-content').innerText; filename = `${songName}-${artistName}.txt`; break; case 'translated': content = document.querySelector('#translated-lyric .lyric-content').innerText; filename = `${songName}-${artistName}-翻译.txt`; break; default: return; } // 创建Blob对象 const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }); // 创建下载链接 const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); // 清理 setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); } // 返回顶部功能 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } // 显示/隐藏返回顶部按钮 window.addEventListener('scroll', function() { const backToTopBtn = document.querySelector('.back-to-top'); if (window.pageYOffset > 300) { backToTopBtn.classList.add('show'); } else { backToTopBtn.classList.remove('show'); } }); // 切换播放器显示/隐藏 function togglePlayer() { const player = document.getElementById('audioPlayer'); const miniPlayer = document.getElementById('miniPlayer'); if (playerVisible) { // 关闭播放器 player.classList.remove('show'); miniPlayer.classList.remove('show'); playerVisible = false; isMinimized = false; // 暂停音频 if (audio && !audio.paused) { togglePlay(); } } else { // 打开播放器 player.classList.add('show'); playerVisible = true; isMinimized = false; // 初始化音频 initAudio(); } } // 最小化播放器 function minimizePlayer() { const player = document.getElementById('audioPlayer'); const miniPlayer = document.getElementById('miniPlayer'); player.classList.add('minimized'); miniPlayer.classList.add('show'); isMinimized = true; // 隐藏完整播放器，但保持音乐播放 setTimeout(() => { player.classList.remove('show'); }, 300); } // 展开播放器 function expandPlayer() { const player = document.getElementById('audioPlayer'); const miniPlayer = document.getElementById('miniPlayer'); miniPlayer.classList.remove('show'); player.classList.remove('minimized'); player.classList.add('show'); isMinimized = false; } // 切换循环播放 function toggleLoop() { if (!audio) return; isLooping = !isLooping; audio.loop = isLooping; const loopBtn = document.getElementById('loopBtn'); if (isLooping) { loopBtn.classList.add('active'); loopBtn.innerHTML = '🔁 单曲循环'; loopBtn.title = '关闭循环'; } else { loopBtn.classList.remove('active'); loopBtn.innerHTML = '🔄 单曲循环'; loopBtn.title = '开启循环'; } } // 切换静音 function toggleMute() { if (!audio) return; isMuted = !isMuted; audio.muted = isMuted; const muteBtn = document.getElementById('muteBtn'); if (isMuted) { muteBtn.classList.add('active'); muteBtn.innerHTML = '🔇 静音'; muteBtn.title = '取消静音'; } else { muteBtn.classList.remove('active'); muteBtn.innerHTML = '🔊 音量'; muteBtn.title = '静音'; } } // 解析LRC歌词 - 修复时间戳问题 function parseLRC(lrcText) { const lines = lrcText.split('n'); const lyrics = []; // 添加一个起始空歌词 lyrics.push({ time: 0, text: '' }); lines.forEach(line => { // 匹配时间标签 [00:00.00] 或 [00:00:00] 格式 const timeMatches = line.match(/[(d+):(d+)(?:.|:)(d+)]/g); if (timeMatches) { const text = line.replace(/[.*?]/g, '').trim(); if (text) { timeMatches.forEach(timeTag => { // 匹配 [分:秒.百分秒] 或 [分:秒:毫秒] 格式 const timeMatch = timeTag.match(/[(d+):(d+)(?:.|:)(d+)]/); if (timeMatch) { const minutes = parseInt(timeMatch[1]); const seconds = parseInt(timeMatch[2]); let milliseconds = parseInt(timeMatch[3]); // 根据位数判断是百分秒还是毫秒 // 如果是2位数，是百分秒(1/100秒)，需要转换为毫秒 // 如果是3位数，是毫秒(1/1000秒) if (timeMatch[3].length === 2) { milliseconds = milliseconds * 10; // 转换为毫秒 } const time = minutes * 60 + seconds + milliseconds / 1000; lyrics.push({ time: time, text: text }); } }); } } }); // 按时间排序 lyrics.sort((a, b) => a.time - b.time); return lyrics; } // 显示歌词 function displayLyrics() { const lrcContent = document.querySelector('#lrc-lyric .lyric-content'); if (lrcContent) { const lrcText = lrcContent.innerText; lyricsData = parseLRC(lrcText); const lyricsDisplay = document.getElementById('lyricsDisplay'); lyricsDisplay.innerHTML = ''; if (lyricsData.length > 0) { lyricsData.forEach((lyric, index) => { const lyricElement = document.createElement('div'); lyricElement.className = 'lyric-line'; lyricElement.textContent = lyric.text || '♪'; lyricElement.dataset.index = index; lyricsDisplay.appendChild(lyricElement); }); } else { lyricsDisplay.innerHTML = '<div class="lyric-line">暂无歌词数据</div>'; } } } // 更新当前歌词 function updateCurrentLyric(currentTime) { if (lyricsData.length === 0) return; // 找到当前时间对应的歌词 let newIndex = -1; for (let i = lyricsData.length - 1; i >= 0; i--) { if (lyricsData[i].time <= currentTime) { newIndex = i; break; } } // 如果歌词索引发生变化，更新显示 if (newIndex !== currentLyricIndex) { currentLyricIndex = newIndex; // 移除所有激活状态 document.querySelectorAll('.lyric-line').forEach(line => { line.classList.remove('active', 'past'); }); // 设置当前歌词和之前的歌词样式 document.querySelectorAll('.lyric-line').forEach((line, index) => { if (index === currentLyricIndex) { line.classList.add('active'); // 滚动到当前歌词 line.scrollIntoView({ behavior: 'smooth', block: 'center' }); } else if (index < currentLyricIndex) { line.classList.add('past'); } }); } } // 点击进度条跳转 function seekAudio(event) { if (!audio) return; const progressBar = document.getElementById('progressBar'); const rect = progressBar.getBoundingClientRect(); const percent = (event.clientX - rect.left) / rect.width; audio.currentTime = percent * audio.duration; } // 初始化音频 function initAudio() { if (!audio) { audio = document.getElementById('audioElement'); const songId = 33894290; const audioUrl = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`; // 设置音频源 audio.src = audioUrl; // 音频加载成功事件 audio.addEventListener('loadeddata', function() { console.log('音频加载成功'); // 加载歌词 displayLyrics(); }); // 音频加载失败事件 audio.addEventListener('error', function(e) { console.error('音频加载失败:', e); document.getElementById('playerInfo').textContent = '付费歌曲，请支持正版'; document.getElementById('playPauseBtn').disabled = true; document.getElementById('playPauseBtn').textContent = '🚫'; document.getElementById('miniPlayPauseBtn').disabled = true; document.getElementById('miniPlayPauseBtn').textContent = '🚫'; // 显示付费提示而不是歌词 const lyricsDisplay = document.getElementById('lyricsDisplay'); lyricsDisplay.innerHTML = ` <div class="premium-notice"> <span class="icon">🎵</span> <div>此歌曲为付费内容</div> <div>请大家支持正版音乐</div> <div style="margin-top: 10px; font-size: 0.8rem; color: var(--text-light);"> 购买正版专辑或订阅音乐平台以享受完整服务 </div> </div> `; }); // 音频加载完成事件 audio.addEventListener('loadedmetadata', function() { updateTimeDisplay(); }); // 音频时间更新事件 audio.addEventListener('timeupdate', function() { updateProgress(); updateTimeDisplay(); updateCurrentLyric(audio.currentTime); }); // 音频结束事件 - 如果是循环模式，会自动重新播放 audio.addEventListener('ended', function() { if (!audio.loop) { isPlaying = false; document.getElementById('playPauseBtn').textContent = '▶️'; document.getElementById('miniPlayPauseBtn').textContent = '▶️'; document.getElementById('playMusicBtn').classList.remove('playing'); // 重置歌词 currentLyricIndex = -1; document.querySelectorAll('.lyric-line').forEach(line => { line.classList.remove('active', 'past'); }); } }); // 尝试预加载音频 audio.load(); } } // 切换播放/暂停 function togglePlay() { if (!audio || !audio.src) return; if (isPlaying) { audio.pause(); document.getElementById('playPauseBtn').textContent = '▶️'; document.getElementById('miniPlayPauseBtn').textContent = '▶️'; document.getElementById('playMusicBtn').classList.remove('playing'); } else { audio.play().catch(e => { console.error('播放失败:', e); // 如果播放失败，也显示付费提示 document.getElementById('playerInfo').textContent = '付费歌曲，请支持正版'; document.getElementById('playPauseBtn').disabled = true; document.getElementById('playPauseBtn').textContent = '🚫'; document.getElementById('miniPlayPauseBtn').disabled = true; document.getElementById('miniPlayPauseBtn').textContent = '🚫'; const lyricsDisplay = document.getElementById('lyricsDisplay'); lyricsDisplay.innerHTML = ` <div class="premium-notice"> <span class="icon">🎵</span> <div>此歌曲为付费内容</div> <div>请大家支持正版音乐</div> <div style="margin-top: 10px; font-size: 0.8rem; color: var(--text-light);"> 购买正版专辑或订阅音乐平台以享受完整服务 </div> </div> `; }); document.getElementById('playPauseBtn').textContent = '⏸️'; document.getElementById('miniPlayPauseBtn').textContent = '⏸️'; document.getElementById('playMusicBtn').classList.add('playing'); } isPlaying = !isPlaying; } // 更新进度条 function updateProgress() { if (!audio) return; const progress = document.getElementById('progress'); const percentage = (audio.currentTime / audio.duration) * 100; progress.style.width = percentage + '%'; } // 更新时间显示 function updateTimeDisplay() { if (!audio) return; const timeDisplay = document.getElementById('timeDisplay'); const currentTime = formatTime(audio.currentTime); const duration = formatTime(audio.duration); timeDisplay.textContent = `${currentTime} / ${duration}`; } // 格式化时间（秒 -> 分:秒） function formatTime(seconds) { if (isNaN(seconds)) return '0:00'; const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs < 10 ? '0' : ''}${secs}`; } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { // 确保纯歌词版本默认显示 showLyric('plain'); }); </script> </body></html>
