diff --git a/player.html b/player.html
index b2fad25..1a91907 100644
--- a/player.html
+++ b/player.html
@@ -122,17 +122,16 @@
display: flex;
flex-direction: column;
align-items: center;
- padding-top: 14vh;
+ padding-top: 10vh;
}
/* 顶部区域 (歌名) */
.header-info {
order: 2;
text-align: center;
- margin: 15px 0;
z-index: 25;
- padding: 0 30px;
opacity: 0.9;
+ margin-bottom: 8px;
}
.header-title {
@@ -251,10 +250,10 @@
/* 唱片本体容器 */
.disc-container {
- width: 72vw;
- height: 72vw;
- max-width: 320px;
- max-height: 320px;
+ width: 55vw;
+ height: 55vw;
+ max-width: 300px;
+ max-height: 300px;
margin-top: 35px;
position: relative;
display: flex;
@@ -358,7 +357,6 @@
}
.album-cover img {
- width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
@@ -460,6 +458,40 @@
transform: scale(1.05);
}
+ .mini-lyrics {
+ overflow: hidden;
+ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, black 40%, black 60%, rgba(0, 0, 0, 0.2) 100%);
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, black 40%, black 60%, rgba(0, 0, 0, 0.2) 100%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ display: none;
+ }
+
+ .mini-line {
+ height: 22px;
+ line-height: 22px;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.6);
+ text-align: center;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .mini-line.active {
+ color: var(--theme-color);
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ .mini-line.dim {
+ opacity: 0.5;
+ filter: blur(0.4px);
+ }
+
/* --- 5. 底部控制区 (Glassmorphism) --- */
.controls-area {
order: 3;
@@ -704,7 +736,11 @@
@@ -729,7 +765,6 @@
- 轻触查看歌词
@@ -839,7 +874,8 @@
currTime: document.getElementById('currTime'),
totalTime: document.getElementById('totalTime'),
lyricsMode: document.getElementById('lyricsMode'),
- lyricsBox: document.getElementById('lyricsBox')
+ lyricsBox: document.getElementById('lyricsBox'),
+ miniLyrics: document.getElementById('miniLyrics')
};
// 初始化
@@ -848,14 +884,21 @@
try {
const res = await fetch(API_URL);
const json = await res.json();
- if (json.code === 200) {
- musicData = json.data;
- renderUI(musicData);
- const lrcText = musicData.lrc || '';
- parseLyrics(lrcText);
- } else {
- els.songTitle.innerText = "获取失败";
- closeLoader();
+ if (json.code === 200) {
+ musicData = json.data;
+ renderUI(musicData);
+ const lrcText = musicData.lrc || '';
+ parseLyrics(lrcText);
+ if (lrcParam && lrcText.trim()) {
+ isLyricView = true;
+ els.discMode.classList.add('hidden');
+ els.lyricsMode.classList.add('active');
+ // if (els.miniLyrics) els.miniLyrics.style.display = 'none';
+ syncLyrics(els.audio.currentTime || 0);
+ }
+ } else {
+ els.songTitle.innerText = "获取失败";
+ closeLoader();
}
} catch (e) {
console.error(e);
@@ -1006,6 +1049,7 @@
function parseLyrics(lrc) {
lyricLines = [];
if (!lrc) {
+ if (els.miniLyrics) els.miniLyrics.style.display = 'none';
els.lyricsBox.innerHTML = '纯音乐 / 暂无歌词
';
return;
}
@@ -1058,6 +1102,26 @@
const box = els.lyricsBox;
const offset = activeEl.offsetTop - box.clientHeight / 2 + activeEl.clientHeight / 2;
box.scrollTo({ top: Math.max(0, offset), behavior: seeking ? 'auto' : 'smooth' });
+
+ updateMiniLyrics(activeIdx);
+ }
+
+ function updateMiniLyrics(idx) {
+ if (!els.miniLyrics) return;
+
+
+ if (els.miniLyrics) els.miniLyrics.style.display = isLyricView ? 'none' : 'block';
+
+ const lines = els.miniLyrics.querySelectorAll('.mini-line');
+ const getText = (i) => (lyricLines[i] ? lyricLines[i].el.innerText : '');
+ if (lines.length >= 3) {
+ lines[0].className = 'mini-line dim';
+ lines[1].className = 'mini-line active';
+ lines[2].className = 'mini-line dim';
+ lines[0].innerText = getText(Math.max(0, idx - 1));
+ lines[1].innerText = getText(idx);
+ lines[2].innerText = getText(Math.min(lyricLines.length - 1, idx + 1));
+ }
}
// 视图切换
@@ -1068,10 +1132,12 @@
if (isLyricView) {
els.discMode.classList.add('hidden');
els.lyricsMode.classList.add('active');
+ if (els.miniLyrics) els.miniLyrics.style.display = 'none';
syncLyrics(els.audio.currentTime);
} else {
els.discMode.classList.remove('hidden');
els.lyricsMode.classList.remove('active');
+ if (els.miniLyrics) els.miniLyrics.style.display = 'block';
}
}