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

hanxi · Apr 30, 2024 · 050ded6 · 050ded6
1 parent b9e1abf
commit 050ded6
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 3 deletions.
diff --git a/xiaomusic/httpserver.py b/xiaomusic/httpserver.py
@@ -22,17 +22,21 @@ def allcmds():
     return KEY_WORD_DICT
 
 
-@app.route("/getvolume")
+@app.route("/getvolume", methods=["GET"])
 def getvolume():
     return {
         "volume": xiaomusic.get_volume(),
     }
 
-@app.route("/searchmusic")
+@app.route("/searchmusic", methods=["GET"])
 def searchmusic():
     name = request.args.get('name')
     return xiaomusic.searchmusic(name)
 
+@app.route("/playingmusic", methods=["GET"])
+def playingmusic():
+    return xiaomusic.playingmusic()
+
 @app.route("/", methods=["GET"])
 def redirect_to_index():
     return send_from_directory("static", "index.html")

diff --git 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);
 });
diff --git 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 @@ <h2>小爱音箱操控面板</h2>
       <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>
diff --git a/xiaomusic/xiaomusic.py b/xiaomusic/xiaomusic.py
@@ -580,3 +580,8 @@ def searchmusic(self, name):
         search_list = fuzzyfinder(name, self._play_list)
         self.log.debug("searchmusic. name:%s search_list:%s", name, search_list)
         return search_list
+
+    # 正在播放中的音乐
+    def playingmusic(self):
+        self.log.debug("playingmusic. cur_music:%s", self.cur_music)
+        return self.cur_music