-
-
-
My Playlist
-
-
Player under maintenance
+
Player under maintenance
+
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');