demo v1.4

1.添加当鼠标接触li是字体变红 2.添加显示专辑封面 3.更改background-color为#151718
AceEdg · Jan 8, 2025 · c55710e · c55710e
1 parent 629b1b7
commit c55710e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 30 deletions.
diff --git a/ae-musicplayer.html b/ae-musicplayer.html
@@ -5,11 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>这是一个测试演示</title>
     <link rel="stylesheet" href="./css/ae-musicplayerstyle.css">
+    <style>
+        body {
+            background-color: #151718;
+        }
+    </style>
 </head>
 <body>
     <div id="mainbody">
         <div id="Player" class="mainbody"> 
             <div class="controls">
+                <div id="songImage"></div>
                 <span id="musictitle">未播放</span>
                 <input type="range" id="seekBar" min="0" value="0" max="100">
                 <span id="currentTime">0:00</span> / <span id="duration">0:00</span><br>
@@ -23,13 +29,13 @@
         </div>
         <div id="playList" class="collapsible">
                 <ul>
-                    <li src="./File/RDJMB x SECMOS - Getting Started (Elluzion Flip).mp3">Getting Started</li>
-                    <li src="./File/Somewhere I Belong.flac">Somewhere I Belong</li>
-                    <li src="./File/Linkin Park - Faint.flac">Faint</li>
+                    <li src="./File/RDJMB x SECMOS - Getting Started (Elluzion Flip).mp3" data-image="">Getting Started</li>
+                    <li src="./File/Somewhere I Belong.flac" data-image="./img/somewhereibelong.jpg">Somewhere I Belong</li>
+                    <li src="./File/Linkin Park - Faint.flac" data-image="./img/faint.png">Faint</li>
                 </ul>
         </div>
 
     </div>
     <script src="./js/ae-musicplayerscript.js"></script>
 </body>
-</html>
+</html>
diff --git a/css/ae-musicplayerstyle.css b/css/ae-musicplayerstyle.css
@@ -4,22 +4,26 @@
   --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */  
 } 
 
-body {
+/*body {
   font-family: Arial, sans-serif;  
-  text-align: center; /* 文本居中 */
-  background-color: black; /* 背景颜色 */
-  margin: 0; /* 去除默认外边距 */
-}
+  text-align: center; 
+  background-color: black; 
+  margin: 0; 
+}*/
 
 #mainbody{
-  position: absolute; /* 绝对定位 */
-  bottom: 20px; /* 距离底部 0px */
-  left: 0px; /* 距离左边 0px */
-  display: flex; /* 使用 Flexbox 布局 */
+  font-family: Arial, sans-serif;  
+  text-align: center; 
+  margin: 0;
+
+  position: absolute;
+  bottom: 20px;
+  left: 0px;
+  display: flex;
   flex-direction: column;
-  justify-content: flex-start; /* 水平居左 */
-  align-items: flex-end; /* 垂直居底 */
-  padding: 0; /* 留出一定的内边距 */
+  justify-content: flex-start;
+  align-items: flex-end;
+  padding: 0;
   transform: translateX(-332px);
   transition: transform 0.7s ease;
 }
@@ -31,8 +35,8 @@ body {
 #Player {
   width: 321px;
   height: 120px;
-  /*background-image: url(../img/test_cyperpunk.jpg); /* 背景图片 */
-  background-color: wheat;
+  background-image: url(../img/test_cyperpunk.jpg); /* 背景图片 */
+  /*background-color: #323637;*/
   border-radius: var(--border-radius); /* 圆角半径 */
   box-shadow: var(--box-shadow); /* 阴影效果 */
   padding: var(--padding); /* 内边距 */
@@ -41,6 +45,17 @@ body {
   background-repeat: no-repeat; /* 背景图片不重复 */ 
 }
 
+#songImage {
+    position: absolute;
+    top: 5px;
+    left: 45px;
+    width: 47px;
+    height: 47px;
+    background-size: cover;
+    background-position: center;
+    margin-right: 10px;
+}
+
 #musictitle{ 
   background-color: #fff;
 }
@@ -60,7 +75,7 @@ body {
   border: none;
   text-decoration: none;
   cursor: pointer;
-  background-size: contain; /* 确保背景图片覆盖整个按钮 */
+  background-size: contain; 
   background-repeat: no-repeat; /* 防止背景图片重复 */
   background-position: center; /* 将背景图片居中 */
   color: transparent; /* 使文本透明 */
@@ -98,9 +113,20 @@ audio {
 #playList {
   width: 360px;
   height: 200px;
+  cursor: pointer;
+  border: none;
+  color: #fff;
   border-radius: var(--border-radius); /* 圆角半径 */
   box-shadow: var(--box-shadow); /* 阴影效果 */
-  background-color: #fff;
+  background-color: #202425;
+}
+
+#playList li {
+  margin-bottom: 5px;
+}
+
+#playList li:hover {
+  color: red;
 }
 
 #exitButton {

diff --git a/img/faint.png b/img/faint.png
diff --git a/img/somewhereibelong.jpg b/img/somewhereibelong.jpg
diff --git a/js/ae-musicplayerscript.js b/js/ae-musicplayerscript.js
@@ -9,16 +9,15 @@ document.addEventListener('DOMContentLoaded', () => {
     const playList = document.getElementById('playList');
     const exitButton = document.getElementById('exitButton');
     const Player = document.getElementById('mainbody');
-    const prevBtn = document.getElementById('prevBtn');  // 上一曲按钮
-    const nextBtn = document.getElementById('nextBtn');  // 下一曲按钮
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
     const musictitle = document.getElementById('musictitle');
+    const songImage = document.getElementById('songImage');
 
     const playListItems = playList.querySelectorAll('li');
 
     let currentSongIndex = 0;
 
-
-
     playPauseBtn.addEventListener('click', () => {
         if (audioPlayer.paused) {
             audioPlayer.play();
@@ -57,41 +56,47 @@ document.addEventListener('DOMContentLoaded', () => {
             audioPlayer.play();
             playPauseBtn.style.backgroundImage = 'url("./img/pauseBtn.png")';
             currentSongIndex = Array.from(playListItems).indexOf(this);
-            updateMusicTitle(currentSongIndex);
+            updateMusicTitleAndImage(currentSongIndex);
         });
     });
 
     audioPlayer.addEventListener('ended', () => {
-        nextSong();  
+        nextSong(); 
+        updateMusicTitleAndImage(currentSongIndex); 
     });
 
     prevBtn.addEventListener('click', () => {
         prevSong();
+        updateMusicTitleAndImage(currentSongIndex);
     });
 
     nextBtn.addEventListener('click', () => {
         nextSong();
+        updateMusicTitleAndImage(currentSongIndex);
     });
 
-    function updateMusicTitle(index) {
+    function updateMusicTitleAndImage(index) {
     const songText = playListItems[index].textContent.trim();
     musictitle.textContent = songText;
+
+    const songImageSrc = playListItems[index].getAttribute('data-image');
+    songImage.style.backgroundImage = `url(${songImageSrc})`;
     }
     function prevSong() {
         currentSongIndex = (currentSongIndex - 1 + playListItems.length) % playListItems.length;
         const prevSongSrc = playListItems[currentSongIndex].getAttribute('src');
         audioPlayer.src = prevSongSrc;
         audioPlayer.play();
         playPauseBtn.style.backgroundImage = 'url("./img/pauseBtn.png")';
-        updateMusicTitle(currentSongIndex);
+        updateMusicTitleAndImage(currentSongIndex);
     }
     function nextSong() {
         currentSongIndex = (currentSongIndex + 1) % playListItems.length;
         const nextSongSrc = playListItems[currentSongIndex].getAttribute('src');
         audioPlayer.src = nextSongSrc;
         audioPlayer.play();
         playPauseBtn.style.backgroundImage = 'url("./img/pauseBtn.png")';
-        updateMusicTitle(currentSongIndex);
+        updateMusicTitleAndImage(currentSongIndex);
     }
 
     playListButton.addEventListener('click', function() {
@@ -113,5 +118,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
     });
 
-    updateMusicTitle(currentSongIndex);    
+    updateMusicTitleAndImage(currentSongIndex);    
 });