新增显示当前正在播放的音乐

2025-12-18 16:53:33 +08:00 · 2024-04-30 13:47:45 +00:00
parent b9e1abff6b
commit 050ded6b2e
4 changed files with 56 additions and 3 deletions
--- a/xiaomusic/static/app.js
+++ b/xiaomusic/static/app.js
@@ -86,4 +86,17 @@ $(function(){
      }
    });
  });
+
+  function get_playing_music() {
+    $.get("/playingmusic", function(data, status) {
+      console.log(data);
+      $("#playering-music").text(data);
+    });
+  }
+
+  // 每3秒获取下正在播放的音乐
+  get_playing_music();
+  setInterval(() => {
+    get_playing_music();
+  }, 3000);
 });
--- a/xiaomusic/static/index.html
+++ b/xiaomusic/static/index.html
@@ -28,6 +28,34 @@
          width: 300px;
          height: 40px;
      }
+
+      .container{
+          width: 280px;
+          overflow: hidden;
+          display: inline-block;
+      }
+      @keyframes text-scroll {
+          0% {
+              left: 100%;
+          }
+          25% {
+              left: 50%;
+          }
+          50% {
+              left: 0%;
+          }
+          75% {
+              left: -50%;
+          }
+          100% {
+              left: -100%;
+          }
+      }
+      .text {
+          font-weight: bold;
+          position: relative;
+          animation: text-scroll 10s linear infinite;
+      }
    </style>
 </head>
 <body>
@@ -47,7 +75,10 @@
      <datalist id="autocomplete-list"></datalist>
      <input id="music-name" type="text" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)" list="autocomplete-list"></input>
      <input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)"></input>
-      <button id="play">播放</button>
+    </div>
+    <button id="play">播放</button>
+    <div class="container">
+      <div id="playering-music" class="text"></div>
    </div>
 </body>
 </html>