</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-info" id="playerInfo"> 正在播放: 采茶姐妹上茶山 (女声齐唱与合唱) </div> <div class="player-controls"> <button class="control-btn" onclick="togglePlay()" id="playPauseBtn">▶️</button> <div class="progress-bar"> <div class="progress" id="progress"></div> </div> <div class="time-display" id="timeDisplay">0:00 / 0:00</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; // 歌词切换功能 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'); playerVisible = !playerVisible; if (playerVisible) { player.classList.add('show'); // 初始化音频 initAudio(); } else { player.classList.remove('show'); // 暂停音频 if (audio && !audio.paused) { togglePlay(); } } } // 初始化音频 function initAudio() { if (!audio) { audio = document.getElementById('audioElement'); // 尝试获取歌曲播放URL // 这里需要根据你的API来获取实际的播放URL const songId = 2165427895; // 注意：这里需要根据你的实际情况获取播放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(); }); // 音频时间更新事件 audio.addEventListener('timeupdate', function() { updateProgress(); updateTimeDisplay(); }); // 音频结束事件 audio.addEventListener('ended', function() { isPlaying = false; document.getElementById('playPauseBtn').textContent = '▶️'; document.getElementById('playMusicBtn').classList.remove('playing'); }); } else { // 如果没有播放URL，显示提示 document.getElementById('playerInfo').textContent = '暂无可播放的音频'; document.getElementById('playPauseBtn').disabled = true; } } } // 切换播放/暂停 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>
