diff --git a/xiaomusic/httpserver.py b/xiaomusic/httpserver.py
index da41ffe..ed0d2bf 100644
--- a/xiaomusic/httpserver.py
+++ b/xiaomusic/httpserver.py
@@ -205,6 +205,16 @@ async def musiclist(Verifcation=Depends(verification)):
     return xiaomusic.get_music_list()
 
 
+@app.get("/musicinfo")
+async def musicinfo(name: str, Verifcation=Depends(verification)):
+    url = xiaomusic.get_music_url(name)
+    return {
+        "ret": "OK",
+        "name": name,
+        "url": url,
+    }
+
+
 @app.get("/curplaylist")
 async def curplaylist(did: str = "", Verifcation=Depends(verification)):
     if not xiaomusic.did_exist(did):
diff --git a/xiaomusic/static/app.js b/xiaomusic/static/app.js
index 68d44df..2455349 100644
--- a/xiaomusic/static/app.js
+++ b/xiaomusic/static/app.js
@@ -130,6 +130,17 @@ $(function(){
     sendcmd(cmd);
   });
 
+  $("#web_play").on("click", () => {
+    const music_name = $("#music_name").val();
+    $.get(`/musicinfo?name=${music_name}`, function(data, status) {
+      console.log(data);
+      if (data.ret == "OK") {
+        const music = new Audio(data.url);
+        music.play();
+      }
+    });
+  });
+
   $("#del_music").on("click", () => {
     var del_music_name = $("#music_name").val();
     if (confirm(`确定删除歌曲 ${del_music_name} 吗？`)) {
diff --git a/xiaomusic/static/index.html b/xiaomusic/static/index.html
index efddb6b..ed185f1 100644
--- a/xiaomusic/static/index.html
+++ b/xiaomusic/static/index.html
@@ -60,6 +60,7 @@ var vConsole = new window.VConsole();
       <div>
       <button id="play_music_list">播放列表歌曲</button>
       <button id="del_music">删除选中歌曲</button>
+      <button id="web_play">网页播放</button>
       </div>
     </div>