Merge pull request #4 from RunlingDev/meta

滚动歌词优化
RunlingDev · Mar 29, 2024 · dacfac1 · dacfac1
2 parents 9b9b9cd + cf48b24
commit dacfac1
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -26,13 +26,13 @@ Demo：[runlingdev.github.io/ClassAlbum](https://runlingdev.github.io/ClassAlbum
 
 | 参数 | 解释 | 示例 |
 | ---- | ---- | ---- |
-|`title`|歌曲名称|反方向的钟|
-|`artist`|艺术家|周杰伦|
-|`album`|专辑名|Jay|
+|`title`|歌曲名称|Cruel Summer|
+|`artist`|艺术家|Taylor Swift|
+|`album`|专辑名|Lover|
 |`weight`|权重|2|
 |`type`|曲目类型|audio|
-|`source`|资源地址|video/反方向的钟.mp4|
-|`lrc`|歌词源|none|
+|`source`|资源地址|audio/CruelSummer.mp4|
+|`lrc`|歌词源|lrc/CruelSummer.lrc|
 
 > 注：
 >
@@ -50,8 +50,10 @@ Demo：[runlingdev.github.io/ClassAlbum](https://runlingdev.github.io/ClassAlbum
 
 1. 上传您的歌单
 
-你可以借助些许工具，例如Github，将您自己的 `songs.json` 上传并获取raw地址(打开后只有文件内容没有其他杂质，也可以是文件直链)，替换 `indexjs.js` 及 `detailjs.js` 中的 `songs.json` 。它位于前者的第二行及后者的第六行。一般而言，GitHub的文件raw下载地址在这个地址：
+你可以借助些许工具，例如Github，将您自己的 `songs.json` 上传并获取raw地址(打开后只有文件内容没有其他杂质，也可以是文件直链)，添加在`indexjs.js` `adetailjs.js` 及 `vdetailjs.js` 中的 `songDataUrls` 。它位于上述文件的开头。
 
+> 一般而言，GitHub的文件raw下载地址在这个地址：
+>
 > https://raw.githubusercontent.com/\<Yourname>/\<Yourrepo>/\<Yourbranch>/\<Yourfile>
 
 2. 允许请求本地文件

diff --git a/aDetail.html b/aDetail.html
@@ -1,18 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Audio Details</title>
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
     <div class="detail-container">
         <h1 id="songTitle"></h1>
         <h2 id="albumTitle"></h2>
-        <div id="mediaContainer"></div>
-        <div id="lyricsContainer"></div>
+        <div id="lyricsContainer">
+            <div id="pastLyrics"></div>
+            <div id="presentLyrics"></div>
+            <div id="comingLyrics"></div>
+        </div>
+        <div id="mediaContainer">
+        </div>
     </div>
     <script src="aDetailjs.js"></script>
 </body>
+
 </html>
diff --git a/aDetailjs.js b/aDetailjs.js
@@ -1,4 +1,5 @@
 const songDataUrls = [
+    'https://raw.githubusercontent.com/RunlingDev/ClassAlbum/meta/songs.json',
     'songs.json',
     'https://example.com/songs.json',
     'https://backup.example.com/songs.json'
@@ -104,16 +105,28 @@ function parseTimeString(timeString) {
 function displayLyrics(lyrics) {
     const audio = document.getElementById('audioPlayer');
     const lyricsDiv = document.getElementById('lyricsContainer');
+    const pastLyricsDiv = document.getElementById('pastLyrics');
+    const presentLyricsDiv = document.getElementById('presentLyrics');
+    const comingLyricsDiv = document.getElementById('comingLyrics');
 
     audio.addEventListener('timeupdate', () => {
         const currentTime = audio.currentTime;
-        for (let i = 0; i < lyrics.length; i++) {
+        try {
+            for (let i = 0; i < lyrics.length; i++) {
             if (lyrics[i].timestamp > currentTime) {
-                lyricsDiv.innerText = lyrics[i - 1].text;
+                pastLyricsDiv.innerText = lyrics[i - 2].text;
+                presentLyricsDiv.innerText = lyrics[i - 1].text;
+                comingLyricsDiv.innerText = lyrics[i].text;
                 lyricsDiv.scrollTop = lyricsDiv.scrollHeight;
                 break;
             }
         }
+        } catch {
+            pastLyricsDiv.innerText = "";
+            presentLyricsDiv.innerText = lyrics[0].text;
+            comingLyricsDiv.innerText = lyrics[1].text;
+        }
+
     });
 }
 

diff --git a/songs.json b/songs.json
@@ -4,18 +4,18 @@
     "artist": "周杰伦",
     "album": "七里香",
     "weight": 1,
-    "type": "audio",
+    "type": "video",
     "source": "video/七里香.mp4",
-    "lrc": "https://music.163.com/api/song/media?id=186001"
+    "lrc": "none"
   },
   {
-    "title": "反方向的钟",
-    "artist": "周杰伦",
-    "album": "Jay",
+    "title": "Cruel Summer",
+    "artist": "Taylor Swift",
+    "album": "Lover",
     "weight": 2,
-    "type": "video",
-    "source": "video/反方向的钟.mp4",
-    "lrc": "none"
+    "type": "audio",
+    "source": "video/Cruel-Summer.flac",
+    "lrc": "https://music.163.com/api/song/media?id=1382576173"
   },
   {
     "title": "曲名",

diff --git a/styles.css b/styles.css
@@ -109,6 +109,26 @@ body {
     font-size: 1em;
 }
 
+#lyricsContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 50%;
+    padding: 20px;
+}
+
+#pastLyrics, #comingLyrics {
+    color: rgb(160, 115, 43);
+    font-size: 1.5em;
+}
+
+#presentLyrics {
+    color: rgb(202, 242, 43);
+    padding: 18px;
+    font-size: 2em;
+}
+
 .song-list::-webkit-scrollbar {
     width: 5px;
 }