|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<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; } |
|
|
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; } |
|
|
.logo { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: bold; color: #333; } |
|
|
.logo i { color: #4a90e2; font-size: 28px; } |
|
|
.search-container { flex: 1; max-width: 600px; margin: 0 40px; position: relative; } |
|
|
.search-wrapper { display: flex; background: #f5f7fa; border-radius: 25px; overflow: hidden; border: 1px solid #e1e5eb; transition: all 0.3s ease; } |
|
|
.search-wrapper:focus-within { background: #ffffff; border-color: #4a90e2; box-shadow: 0 0 15px rgba(74, 144, 226, 0.2); } |
|
|
.search-input { flex: 1; padding: 12px 20px; background: transparent; border: none; color: #333; font-size: 16px; outline: none; } |
|
|
.search-input::placeholder { color: #adb5bd; } |
|
|
.source-select { background: #f0f3f7; border: none; color: #495057; padding: 12px 15px; outline: none; cursor: pointer; border-left: 1px solid #e1e5eb; } |
|
|
.source-select option { background: #ffffff; color: #333; padding: 8px; } |
|
|
.search-btn { background: #4a90e2; border: none; color: #fff; padding: 12px 20px; cursor: pointer; transition: all 0.3s ease; } |
|
|
.search-btn:hover { background: #3a7bc8; } |
|
|
.main-container { max-width: 1200px; margin: 0 auto; padding: 20px; min-height: calc(100vh - 170px); } |
|
|
.content-panel { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 25px; margin-bottom: 20px; height: 100%; } |
|
|
.panel-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #333; display: flex; align-items: center; gap: 10px; } |
|
|
.panel-title i { color: #4a90e2; } |
|
|
.search-results { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced4da transparent; display: grid; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 12px; padding-right: 10px; } |
|
|
.search-results::-webkit-scrollbar { width: 6px; } |
|
|
.search-results::-webkit-scrollbar-track { background: transparent; } |
|
|
.search-results::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; } |
|
|
.song-card { display: flex; align-items: flex-start; padding: 12px 15px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; background: #f8f9fa; border: 1px solid #e9ecef; } |
|
|
.song-card:hover { background: #ffffff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } |
|
|
.song-card.active { background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05)); border: 1px solid rgba(74, 144, 226, 0.3); } |
|
|
.song-index { width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 14px; font-weight: 600; color: #495057; flex-shrink: 0; } |
|
|
.song-card.active .song-index { background: linear-gradient(135deg, #4a90e2, #3a7bc8); color: #fff; } |
|
|
.song-info { flex: 1; min-width: 0; padding: 2px 0; } |
|
|
.song-name { font-weight: 600; margin-bottom: 3px; font-size: 15px; color: #333; white-space: normal; line-height: 1.4; } |
|
|
.song-artist { color: #6c757d; font-size: 13px; white-space: normal; line-height: 1.4; } |
|
|
.song-duration { color: #adb5bd; font-size: 13px; margin-left: 10px; white-space: nowrap; align-self: center; } |
|
|
.song-actions { display: flex; gap: 8px; margin-left: 10px; align-self: center; } |
|
|
.action-btn { width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; border: none; color: #6c757d; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 13px; } |
|
|
.action-btn:hover { background: #dee2e6; color: #4a90e2; transform: scale(1.1); } |
|
|
.player-panel { text-align: center; padding: 30px 25px; } |
|
|
.current-song { margin-bottom: 30px; } |
|
|
.current-cover-container { position: relative; display: inline-block; margin-bottom: 25px; } |
|
|
.current-cover { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 15px 35px rgba(74, 144, 226, 0.2); transition: all 0.3s ease; border: 6px solid #f8f9fa; } |
|
|
.current-cover.playing { animation: rotate 20s linear infinite; } |
|
|
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
.current-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; color: #333; } |
|
|
.current-info p { color: #6c757d; font-size: 16px; } |
|
|
.player-controls { display: flex; justify-content: center; align-items: center; gap: 25px; margin-bottom: 30px; } |
|
|
.control-btn { background: #f1f3f5; border: none; border-radius: 50%; color: #495057; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } |
|
|
.control-btn:hover { background: #e9ecef; transform: scale(1.1); } |
|
|
.control-btn.small { width: 50px; height: 50px; font-size: 18px; } |
|
|
.play-btn { width: 70px; height: 70px; font-size: 28px; background: linear-gradient(135deg, #4a90e2, #3a7bc8); color: white; box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3); } |
|
|
.play-btn:hover { background: linear-gradient(135deg, #3a7bc8, #2d6bc1); box-shadow: 0 12px 35px rgba(74, 144, 226, 0.4); } |
|
|
.progress-container { margin-bottom: 30px; padding: 0 20px; } |
|
|
.progress-bar { width: 100%; height: 6px; background: #e9ecef; border-radius: 3px; cursor: pointer; margin-bottom: 10px; position: relative; } |
|
|
.progress-fill { height: 100%; background: linear-gradient(90deg, #4a90e2, #6aa8e6); border-radius: 3px; width: 0%; transition: width 0.1s ease; position: relative; } |
|
|
.progress-fill::after { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: #4a90e2; border-radius: 50%; box-shadow: 0 2px 8px rgba(74, 144, 226, 0.5); } |
|
|
.time-info { display: flex; justify-content: space-between; font-size: 14px; color: #6c757d; } |
|
|
.volume-container { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; justify-content: center; } |
|
|
.volume-icon { color: #6c757d; font-size: 18px; } |
|
|
.volume-slider { width: 150px; height: 4px; background: #e9ecef; border-radius: 2px; outline: none; cursor: pointer; -webkit-appearance: none; } |
|
|
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #4a90e2; border-radius: 50%; cursor: pointer; } |
|
|
.quality-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding: 15px 20px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } |
|
|
.quality-label { display: flex; align-items: center; gap: 8px; color: #495057; font-size: 14px; } |
|
|
.quality-select { background: #ffffff; border: 1px solid #ced4da; border-radius: 8px; color: #333; padding: 8px 12px; outline: none; cursor: pointer; font-size: 14px; } |
|
|
.quality-select option { background: #ffffff; color: #333; padding: 8px; } |
|
|
.download-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; } |
|
|
.download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 15px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; color: #495057; cursor: pointer; transition: all 0.3s ease; font-size: 14px; } |
|
|
.download-btn:hover:not(:disabled) { background: #eef2f7; border-color: #4a90e2; color: #4a90e2; } |
|
|
.download-btn:disabled { opacity: 0.5; cursor: not-allowed; } |
|
|
.lyrics-container { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced4da transparent; padding-right: 10px; position: relative; } |
|
|
.lyrics-container::-webkit-scrollbar { width: 6px; } |
|
|
.lyrics-container::-webkit-scrollbar-track { background: transparent; } |
|
|
.lyrics-container::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; } |
|
|
.lyric-line { padding: 8px 15px; transition: all 0.3s ease; cursor: pointer; border-radius: 8px; margin-bottom: 6px; color: #6c757d; line-height: 1.6; text-align: center; font-size: 15px; } |
|
|
.lyric-line:hover { background: #f8f9fa; color: #4a90e2; } |
|
|
.lyric-line.active { color: #4a90e2; font-weight: 600; background: rgba(74, 144, 226, 0.08); transform: scale(1.02); } |
|
|
.loading, .error, .empty-state { text-align: center; padding: 60px 20px; color: #6c757d; } |
|
|
.loading i, .error i, .empty-state i { font-size: 48px; margin-bottom: 15px; display: block; color: #adb5bd; } |
|
|
.loading i { animation: spin 1s linear infinite; color: #4a90e2; } |
|
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
.error i { color: #e74c3c; } |
|
|
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05); z-index: 99; } |
|
|
.mobile-nav-items { display: flex; justify-content: space-around; } |
|
|
.mobile-nav-item { flex: 1; text-align: center; padding: 15px 0; color: #6c757d; text-decoration: none; font-size: 12px; transition: all 0.3s ease; } |
|
|
.mobile-nav-item.active { color: #4a90e2; } |
|
|
.mobile-nav-item i { font-size: 20px; margin-bottom: 5px; display: block; } |
|
|
.view-container { display: block; } |
|
|
@media (min-width: 1200px) { .desktop-layout { display: grid; grid-template-columns: 350px 450px 350px; gap: 25px; } .mobile-nav { display: none !important; } } |
|
|
@media (max-width: 1199px) { .mobile-nav { display: block; } .main-container { padding-bottom: 80px; } .desktop-layout { display: block; } .view-container { display: none; } .view-container.active { display: block; } .song-name { font-size: 14px; line-height: 1.4; } .song-artist { font-size: 13px; line-height: 1.4; } .song-card { padding: 10px 12px; gap: 10px; } .song-index { width: 28px; height: 28px; font-size: 13px; } .action-btn { width: 28px; height: 28px; font-size: 12px; } } |
|
|
@media (max-width: 768px) { .nav-container { flex-direction: column; gap: 15px; padding: 0 15px; } .search-container { margin: 0; max-width: none; width: 100%; } .current-cover { width: 180px; height: 180px; } .player-controls { gap: 15px; } .content-panel { padding: 15px 12px; } .panel-title { font-size: 17px; margin-bottom: 15px; } .search-results { gap: 10px; } } |
|
|
::-webkit-scrollbar { width: 8px; } |
|
|
::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 4px; } |
|
|
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; } |
|
|
::-webkit-scrollbar-thumb:hover { background: #adb5bd; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<nav class="navbar"> |
|
|
<div class="nav-container"> |
|
|
<div class="logo"><i class="fas fa-music"></i><span>云音乐</span></div> |
|
|
<div class="search-container"> |
|
|
<div class="search-wrapper"> |
|
|
<input type="text" class="search-input" placeholder="搜索音乐、歌手、专辑..." id="searchInput"> |
|
|
<select class="source-select" id="sourceSelect"> |
|
|
<option value="netease">网易云音乐</option> |
|
|
<option value="tencent">QQ音乐</option> |
|
|
<option value="kuwo">酷我音乐</option> |
|
|
<option value="joox">JOOX</option> |
|
|
<option value="kugou">酷狗音乐</option> |
|
|
<option value="migu">咪咕音乐</option> |
|
|
<option value="deezer">Deezer</option> |
|
|
<option value="spotify">Spotify</option> |
|
|
<option value="apple">Apple Music</option> |
|
|
<option value="ytmusic">YouTube Music</option> |
|
|
<option value="tidal">TIDAL</option> |
|
|
<option value="qobuz">Qobuz</option> |
|
|
<option value="ximalaya">喜马拉雅</option> |
|
|
</select> |
|
|
<button class="search-btn" onclick="searchMusic()"><i class="fas fa-search"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
<div class="main-container"> |
|
|
<div class="desktop-layout"> |
|
|
<div class="view-container" id="searchView"> |
|
|
<div class="content-panel"> |
|
|
<h2 class="panel-title"><i class="fas fa-search"></i> 搜索结果</h2> |
|
|
<div class="search-results" id="searchResults"> |
|
|
<div class="empty-state"><i class="fas fa-music"></i><div>在上方搜索框输入关键词开始搜索音乐</div></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="view-container" id="playerView"> |
|
|
<div class="content-panel player-panel"> |
|
|
<div class="current-song"> |
|
|
<div class="current-cover-container"><img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+" alt="专辑封面"></div> |
|
|
<div class="current-info"><h3 id="currentTitle">未选择歌曲</h3><p id="currentArtist">请搜索并选择要播放的歌曲</p></div> |
|
|
</div> |
|
|
<div class="player-controls"> |
|
|
<button class="control-btn small" onclick="previousSong()"><i class="fas fa-step-backward"></i></button> |
|
|
<button class="control-btn play-btn" id="playBtn" onclick="togglePlay()"><i class="fas fa-play"></i></button> |
|
|
<button class="control-btn small" onclick="nextSong()"><i class="fas fa-step-forward"></i></button> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" onclick="seekTo(event)"><div class="progress-fill" id="progressFill"></div></div> |
|
|
<div class="time-info"><span id="currentTime">0:00</span><span id="totalTime">0:00</span></div> |
|
|
</div> |
|
|
<div class="quality-container"> |
|
|
<div class="quality-label"><i class="fas fa-music"></i><span>音质</span></div> |
|
|
<select class="quality-select" id="qualitySelect"> |
|
|
<option value="128">标准 128K</option> |
|
|
<option value="192">较高 192K</option> |
|
|
<option value="320" selected>高品质 320K</option> |
|
|
<option value="740">无损 FLAC</option> |
|
|
<option value="999">Hi-Res</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="volume-container"> |
|
|
<i class="fas fa-volume-up volume-icon"></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><span>下载音乐</span></button> |
|
|
<button class="download-btn" onclick="downloadCurrentLyric()" id="downloadLyricBtn" disabled><i class="fas fa-file-text"></i><span>下载歌词</span></button> |
|
|
</div> |
|
|
<audio id="audioPlayer" preload="metadata"></audio> |
|
|
</div> |
|
|
</div> |
|
|
<div class="view-container" id="lyricsView"> |
|
|
<div class="content-panel"> |
|
|
<h2 class="panel-title"><i class="fas fa-align-left"></i> 歌词</h2> |
|
|
<div class="lyrics-container" id="lyricsContainer"><div class="lyric-line">暂无歌词</div></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mobile-nav"> |
|
|
<div class="mobile-nav-items"> |
|
|
<a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)"><i class="fas fa-search"></i><span>搜索</span></a> |
|
|
<a href="#playerView" class="mobile-nav-item" onclick="switchView('playerView', this)"><i class="fas fa-play-circle"></i><span>播放</span></a> |
|
|
<a href="#lyricsView" class="mobile-nav-item" onclick="switchView('lyricsView', this)"><i class="fas fa-align-left"></i><span>歌词</span></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
const audioPlayer = document.getElementById('audioPlayer'); |
|
|
const playBtn = document.getElementById('playBtn'); |
|
|
const progressFill = document.getElementById('progressFill'); |
|
|
const currentTimeSpan = document.getElementById('currentTime'); |
|
|
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'); |
|
|
|
|
|
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); |
|
|
if (!savedState) return; |
|
|
|
|
|
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(); |
|
|
if(urlData && urlData.url) { |
|
|
audioPlayer.src = urlData.url; |
|
|
} |
|
|
|
|
|
document.getElementById('downloadSongBtn').disabled = false; |
|
|
document.getElementById('downloadLyricBtn').disabled = false; |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("加载状态失败, 数据已损坏:", e); |
|
|
localStorage.removeItem(PLAYER_STATE_KEY); |
|
|
} |
|
|
} |
|
|
|
|
|
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]); |
|
|
} |
|
|
|
|
|
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'; |
|
|
else if (value < 50) volumeIcon.className = 'fas fa-volume-down volume-icon'; |
|
|
else volumeIcon.className = 'fas fa-volume-up volume-icon'; |
|
|
if (shouldSave) { |
|
|
savePlayerState(); |
|
|
} |
|
|
} |
|
|
|
|
|
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'); |
|
|
}); |
|
|
} |
|
|
} else { |
|
|
showNotification('无法获取音乐链接', 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('播放失败:', error); |
|
|
showNotification('播放失败，请检查网络连接', 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
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); } |
|
|
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(); } 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> |
|
|
</html> |
