更新 player.html

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;
+      width: 55vw;
-      height: 72vw;
+      height: 55vw;
-      max-width: 320px;
+      max-width: 300px;
-      max-height: 320px;
+      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 @@
     <!-- 歌名信息 -->
     <div class="header-info">
       <div class="header-title" id="songTitle">...</div>
-      <div class="header-artist">Hi-Res Audio</div>
+      <div class="mini-lyrics" id="miniLyrics">
+        <div class="mini-line dim"></div>
+        <div class="mini-line active"></div>
+        <div class="mini-line dim"></div>
+      </div>
     </div>
 
     <!-- 中间视图切换 -->
@@ -729,7 +765,6 @@
             </div>
           </div>
         </div>
-        <div class="hint-text">轻触查看歌词</div>
       </div>
 
       <!-- 歌词模式 -->
@@ -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) {
+      if (json.code === 200) {
-          musicData = json.data;
+        musicData = json.data;
-          renderUI(musicData);
+        renderUI(musicData);
-          const lrcText = musicData.lrc || '';
+        const lrcText = musicData.lrc || '';
-          parseLyrics(lrcText);
+        parseLyrics(lrcText);
-        } else {
+        if (lrcParam && lrcText.trim()) {
-          els.songTitle.innerText = "获取失败";
+          isLyricView = true;
-          closeLoader();
+          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 = '<div class="lyric-line">纯音乐 / 暂无歌词</div>';
         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';
       }
     }