From 9e3564e60da8c08009159d87c318ce665ac3d9a5 Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 23 Nov 2025 20:35:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(music):=20=E5=AE=9E=E7=8E=B0=E9=BB=91?= =?UTF-8?q?=E8=83=B6=E5=94=B1=E7=89=87=E6=92=AD=E6=94=BE=E5=99=A8=E4=B8=8E?= =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E5=90=8C=E6=AD=A5=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构黑胶唱片样式，添加旋转动画与脉冲波效果 - 移除机械臂元素，改用点击唱片控制播放/暂停 - 新增歌词显示区域，实现歌词随播放进度高亮 - 解析并加载 LRC 歌词文件，支持异步获取远程歌词 - 使用 requestAnimationFrame 实现高性能歌词滚动 - 更新移动端悬浮按钮状态以反映音乐播放状态 - 简化主题判断逻辑，优化语言切换功能 - 隐藏 APlayer 默认界面，保留核心音频控制功能 --- about.html | 8 ++---- css/about.css | 15 ++++++++-- js/about.js | 77 ++++++++++++++++++++++++++++++++++++--------------- 3 files changed, 69 insertions(+), 31 deletions(-) diff --git a/about.html b/about.html index 8971533..23d2a95 100644 --- a/about.html +++ b/about.html @@ -196,11 +196,9 @@
-
-
- My Playlist - - + +
+
--
diff --git a/css/about.css b/css/about.css index bd6b553..5396fcc 100644 --- a/css/about.css +++ b/css/about.css @@ -1580,15 +1580,24 @@ body { .social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; } .area-music { padding: 20px; display: flex; flex-direction: column; } .vinyl-player { position: relative; display: flex; align-items: center; gap: 16px; } -.vinyl-disc { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(#222 0%, #111 30%, #000 60%, #111 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.2); position: relative; } +.vinyl-disc { width: clamp(110px, 26vw, 160px); height: clamp(110px, 26vw, 160px); border-radius: 50%; background: + radial-gradient(#222 0%, #111 30%, #000 60%, #111 100%), + repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 3px, transparent 6px), + repeating-conic-gradient(from 0deg, rgba(255,215,0,0.05) 0deg, rgba(255,215,0,0.0) 8deg); + box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.2); + position: relative; } .vinyl-disc::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } -.vinyl-arm { width: 80px; height: 8px; background: #888; border-radius: 8px; transform-origin: left center; transform: rotate(12deg); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } +.vinyl-disc::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(108,92,231,0.15); animation: pulseWave 2.4s ease-out infinite; } +.vinyl-arm { display: none !important; } .vinyl-info { display: flex; flex-direction: column; gap: 6px; } .vinyl-title { font-weight: 700; background: var(--gradient-4); -webkit-background-clip: text; background-clip: text; color: transparent; } .vinyl-status { font-size: 0.85rem; color: var(--text-secondary); } -.netease-embed { position: absolute; right: 20px; bottom: 10px; width: 340px; height: 86px; border-radius: 12px; overflow: hidden; } .spinning { animation: spinDisc 8s linear infinite; } @keyframes spinDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } +.vinyl-lyrics { flex: 1; min-width: 160px; max-width: 240px; padding: 8px 12px; } +.vinyl-lyrics #lyric-current { font-size: 0.95rem; line-height: 1.6; background: var(--gradient-3); -webkit-background-clip: text; background-clip: text; color: transparent; } +@keyframes pulseWave { 0% { box-shadow: 0 0 0 2px rgba(108,92,231,0.0); } 50% { box-shadow: 0 0 0 10px rgba(108,92,231,0.25); } 100% { box-shadow: 0 0 0 2px rgba(108,92,231,0.0); } } +.aplayer { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; } .fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); } .fab-label { font-size: 12px; } diff --git a/js/about.js b/js/about.js index 90c8068..a08a079 100644 --- a/js/about.js +++ b/js/about.js @@ -616,17 +616,34 @@ class UIManager { } initMusic() { - const embed = null; // 不再使用 iframe 嵌入 const disc = document.getElementById('vinyl-disc'); - const btn = document.getElementById('music-toggle'); const statusEl = document.getElementById('music-status'); - if (!disc || !btn) return; + const lyricEl = document.getElementById('lyric-current'); + if (!disc) return; let playing = true; let loaded = false; + let rafId = null; let lyricIdx = 0; this._lyricLines = []; + const stopLyricLoop = () => { if (rafId) cancelAnimationFrame(rafId); rafId = null; }; + const startLyricLoop = () => { + stopLyricLoop(); + const loop = () => { + if (!this.aplayer || !playing) return; + const ct = this.aplayer.audio.currentTime || 0; + while (lyricIdx + 1 < this._lyricLines.length && this._lyricLines[lyricIdx + 1].t <= ct) { lyricIdx++; } + const line = this._lyricLines[lyricIdx]; + if (line && lyricEl && lyricEl.dataset.last !== String(lyricIdx)) { + lyricEl.textContent = line.text || ''; + lyricEl.dataset.last = String(lyricIdx); + } + rafId = requestAnimationFrame(loop); + }; + rafId = requestAnimationFrame(loop); + }; const fail = () => { playing = false; - embed.style.display = 'none'; if (statusEl) statusEl.style.display = 'inline'; + stopLyricLoop(); + if (lyricEl) { lyricEl.textContent = '--'; lyricEl.dataset.last = ''; } updateUI(); }; const updateUI = () => { @@ -638,7 +655,8 @@ class UIManager { btn.textContent = this._t('music.play') || 'Play'; } }; - btn.addEventListener('click', () => { + disc.addEventListener('click', () => { + if (this.aplayer) { this.aplayer.toggle(); return; } playing = !playing; updateUI(); }); @@ -654,17 +672,35 @@ class UIManager { listFolded: true, audio }); - this.aplayer.on('play', () => { - playing = true; - updateUI(); - }); - this.aplayer.on('pause', () => { - playing = false; - updateUI(); - }); - btn.addEventListener('click', () => { - this.aplayer.toggle(); + const parseLrc = (lrc) => { + if (!lrc) return []; + const lines = String(lrc).split(/\r?\n/).map(s => s.trim()).filter(Boolean); + const out = []; + for (const s of lines) { + const m = s.match(/\[(\d{1,2}):(\d{1,2})(?:\.(\d{1,3}))?\](.*)/); + if (!m) continue; + const mm = parseInt(m[1], 10), ss = parseInt(m[2], 10), xx = parseInt(m[3] || '0', 10); + const t = mm * 60 + ss + (xx / 1000); + const text = m[4].trim(); + out.push({ t, text }); + } + out.sort((a, b) => a.t - b.t); + return out; + }; + const ensureLrc = async (track) => { + if (track && track.lrc && /^https?:/.test(track.lrc)) { + try { const r = await fetch(track.lrc); const s = await r.text(); return parseLrc(s); } catch { return []; } + } + return parseLrc(track?.lrc); + }; + this.aplayer.on('play', async () => { + playing = true; updateUI(); + const cur = this.aplayer.list.audios[this.aplayer.list.index]; + this._lyricLines = await ensureLrc(cur); + lyricIdx = 0; startLyricLoop(); }); + this.aplayer.on('pause', () => { playing = false; updateUI(); stopLyricLoop(); }); + this.aplayer.on('ended', () => { stopLyricLoop(); }); loaded = true; }).catch(() => fail()); setTimeout(() => { @@ -685,16 +721,11 @@ class UIManager { if (!main || !menu || !fLang || !fTheme || !fMusic) return; const updateLabels = () => { const lang = localStorage.getItem('lang') || (navigator.language && navigator.language.startsWith('zh') ? 'zh' : 'en'); - const cacheKey = window.SiteConfig?.cacheKeys?.theme?.key || 'theme-v2'; - const themeBean = localStorage.getItem(cacheKey); - let theme = 'day'; - if (themeBean != null && themeBean.value != null) { - theme = themeBean.value; - } + const theme = (localStorage.getItem('theme') === 'night') ? 'night' : 'day'; fLang.querySelector('.fab-text').textContent = lang === 'zh' ? '中文' : 'English'; fTheme.querySelector('.fab-text').textContent = theme === 'night' ? 'Night' : 'Day'; - const mt = document.getElementById('music-toggle'); - fMusic.querySelector('.fab-text').textContent = mt ? mt.textContent : 'Music'; + const playing = (this.aplayer && !this.aplayer.audio.paused); + fMusic.querySelector('.fab-text').textContent = playing ? (this._t('music.pause') || 'Pause') : (this._t('music.play') || 'Play'); }; main.addEventListener('click', () => { menu.classList.toggle('open');