</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"> 正在播放: 我是真的真的爱你 (dj 版) </div> <button class="close-player" onclick="togglePlayer()" title="关闭播放器">×</button> </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="lyrics-display" id="lyricsDisplay"> <div class="lyric-line">加载歌词中...</div> </div> <audio id="audioElement" preload="metadata"> <!-- 音频源将通过JavaScript设置 --> </audio> </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; // 歌词切换功能 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 = '我是真的真的爱你 (dj 版)'; 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'); playerVisible = !playerVisible; if (playerVisible) { player.classList.add('show'); // 初始化音频 initAudio(); } else { player.classList.remove('show'); // 暂停音频 if (audio && !audio.paused) { togglePlay(); } } } // 解析LRC歌词 function parseLRC(lrcText) { const lines = lrcText.split('n'); const lyrics = []; lines.forEach(line => { // 匹配时间标签 [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]); const milliseconds = parseInt(timeMatch[3]); const time = minutes * 60 + seconds + milliseconds / 100; 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 = 0; i < lyricsData.length; i++) { if (lyricsData[i].time <= currentTime) { newIndex = i; } else { 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'); // 尝试获取歌曲播放URL const songId = 2738131496; // 注意：这里需要根据你的实际情况获取播放URL // 以下是一个示例URL，实际使用时需要替换为真实的API调用 const audioUrl = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`; // 由于版权原因，这里使用一个占位符 // 实际使用时请取消注释上面的代码并实现获取播放URL的逻辑 // const audioUrl = ''; // 留空，需要实际实现 if (audioUrl) { audio.src = audioUrl; // 音频加载完成事件 audio.addEventListener('loadedmetadata', function() { updateTimeDisplay(); // 加载歌词 displayLyrics(); }); // 音频时间更新事件 audio.addEventListener('timeupdate', function() { updateProgress(); updateTimeDisplay(); updateCurrentLyric(audio.currentTime); }); // 音频结束事件 audio.addEventListener('ended', function() { isPlaying = false; document.getElementById('playPauseBtn').textContent = '▶️'; document.getElementById('playMusicBtn').classList.remove('playing'); // 重置歌词 currentLyricIndex = -1; document.querySelectorAll('.lyric-line').forEach(line => { line.classList.remove('active', 'past'); }); }); } else { // 如果没有播放URL，显示提示 document.getElementById('playerInfo').textContent = '暂无可播放的音频'; document.getElementById('playPauseBtn').disabled = true; // 仍然加载歌词用于显示 displayLyrics(); } } } // 切换播放/暂停 function togglePlay() { if (!audio || !audio.src) return; if (isPlaying) { audio.pause(); document.getElementById('playPauseBtn').textContent = '▶️'; document.getElementById('playMusicBtn').classList.remove('playing'); } else { audio.play().catch(e => { console.error('播放失败:', e); alert('音频播放失败，可能由于版权限制或网络问题'); }); document.getElementById('playPauseBtn').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>
