feat: 更新音乐播放器界面和功能

- 调整播放器底部样式，优化进度条和操作按钮布局
- 修复音量控制拖动功能
- 更新音乐数据源，增加更多歌曲分类和曲目
- 优化图片资源路径和命名规范
- 添加新的SVG图标和背景元素
- 修复播放进度条选择器错误
- 调整标签样式和交互效果

guess.html

@@ -24,14 +24,14 @@
                     <img class="record-black" src="./static/img/record-black.svg" />
                     <div class="record-circle"></div>
                     <img class="star-icon" src="./static/img/star-icon.png" alt="" />
-                    <img class="bj-2" src="./static/img/guess-bj-2.svg" alt="" />
+                    <img class="bj-2" src="./static/img/guess/guess-bj-2.svg" alt="" />
-                    <img class="love-little" src="./static/img/guess-love-little.svg" alt="" />
+                    <img class="love-little" src="./static/img/guess/guess-love-little.svg" alt="" />
                     <img class="music-icon" src="./static/img/music-icon.svg" alt="" />
-                    <img class="bj" src="./static/img/guess-bj.svg" alt="" />
+                    <img class="bj" src="./static/img/guess/guess-bj.svg" alt="" />
-                    <img class="love-big" src="./static/img/guess-love-big.svg" alt="" />
+                    <img class="love-big" src="./static/img/guess/guess-love-big.svg" alt="" />
                     <img class="music-score" src="./static/img/music-score.png" />
-                    <img class="question" src="./static/img/question-mark.png" />
+                    <img class="question" src="./static/img/guess/question-mark.png" />
-                    <img class="text" src="./static/img/guess-text.svg" />
+                    <img class="text" src="./static/img/guess/guess-text.svg" />
                     <img class="face" src="./static/img/smiling-face.png" />
                     <img class="star-icon-2" src="./static/img/star-icon-2.png" />
                     <img class="ai-music" src="./static/img/ai-music.png" />
@@ -40,8 +40,14 @@
                 </div>
 
                 <div class="details">
+                    <img class="ray-light ray-light-left" src="./static/img/guess/ray-light.svg" />
+                    <img class="ray-light ray-light-right" src="./static/img/guess/ray-light.svg" />
+                    <img class="bj-check" src="./static/img/guess/bj-check.svg" alt="" />
+                    <img class="bj-mask" src="./static/img/guess/bj-mask.svg" alt="" />
+                    <img class="fluctuate-icon" src="./static/img/guess/fluctuate-icon.png" alt="" />
                     <div class="start-box">
-                        
+                        <img class="microphone" src="./static/img/guess/microphone.png" alt="" />
+                        <img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
                     </div>
                 </div>
             </div>

song-request-station.html

@@ -50,20 +50,14 @@
                     </div>
                 </div>
 
-                <div class="bottom-play flexacenter" v-if="playData">
+                <div class="bottom-play flexflex" v-if="playData">
                     <div class="bottom-left flex1 flexacenter">
-                        <img v-if="playData?.img" class="img" :src="playData?.img" />
+                        <!-- <img v-if="playData?.img" class="img" :src="playData?.img" /> -->
                         <div class="name">{{ playData?.name }}</div>
                     </div>
 
                     <div class="bottom-middle flexcenter">
-                        <div class="operate flexcenter">
+                        <div class="flexacenter" style="margin-bottom: 10px">
-                            <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
-                            <img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
-                            <img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
-                            <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
-                        </div>
-                        <div class="flexacenter">
                             <div class="time-display">{{ currentTimeFormatted }}</div>
                             <div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
                                 <div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
@@ -71,6 +65,13 @@
                             </div>
                             <div class="time-display">{{ durationFormatted }}</div>
                         </div>
+
+                        <div class="operate flexcenter">
+                            <img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
+                            <img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
+                            <img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
+                            <img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
+                        </div>
                     </div>
 
                     <div class="bottom-right flex1 flexcenter">

static/css/guess.css

@@ -234,8 +234,53 @@
   z-index: -1;
   border-radius: 18px;
 }
+.container .container-box .details .ray-light {
+  width: 286px;
+  height: 286px;
+  position: absolute;
+  top: 3px;
+}
+.container .container-box .details .ray-light.ray-light-left {
+  left: 3px;
+}
+.container .container-box .details .ray-light.ray-light-right {
+  right: 3px;
+  transform: scaleX(-1);
+}
+.container .container-box .details .bj-check {
+  width: 1200px;
+  height: 134px;
+  position: absolute;
+  bottom: 3px;
+  left: 0;
+}
+.container .container-box .details .bj-mask {
+  width: 1194px;
+  height: 129px;
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+}
+.container .container-box .details .fluctuate-icon {
+  width: 400px;
+  height: 86px;
+  position: absolute;
+  top: 293px;
+  right: 0;
+}
 .container .container-box .details .start-box {
   width: 100%;
   height: 100%;
   position: relative;
 }
+.container .container-box .details .start-box .microphone {
+  width: 326px;
+  height: 326px;
+  position: absolute;
+  top: 93px;
+  left: 163px;
+}
+.container .container-box .details .start-box .suspect-text {
+  width: 493px;
+  height: 56px;
+}

static/css/guess.less

@@ -259,10 +259,62 @@
                 border-radius: 18px;
             }
 
+            .ray-light {
+                width: 286px;
+                height: 286px;
+                position: absolute;
+                top: 3px;
+
+                &.ray-light-left {
+                    left: 3px;
+                }
+
+                &.ray-light-right {
+                    right: 3px;
+                    transform: scaleX(-1);
+                }
+            }
+
+            .bj-check {
+                width: 1200px;
+                height: 134px;
+                position: absolute;
+                bottom: 3px;
+                left: 0;
+            }
+
+            .bj-mask {
+                width: 1194px;
+                height: 129px;
+                position: absolute;
+                left: 3px;
+                bottom: 3px;
+            }
+
+            .fluctuate-icon {
+                width: 400px;
+                height: 86px;
+                position: absolute;
+                top: 293px;
+                right: 0;
+            }
+
             .start-box {
                 width: 100%;
                 height: 100%;
                 position: relative;
+                .microphone {
+                    width: 326px;
+                    height: 326px;
+                    position: absolute;
+                    top: 93px;
+                    left: 163px;
+                }
+
+                .suspect-text {
+                    width: 493px;
+                    height: 56px;
+                }
             }
         }
     }

static/css/song-request-station.css

@@ -256,7 +256,7 @@
 .container .container-box .list-box .list-fill .fill-item {
   width: 33px;
   height: 23px;
-  border-radius: 100px;
+  border-radius: 12px;
   position: absolute;
   cursor: pointer;
   box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
@@ -300,7 +300,7 @@
 .tag-item {
   height: 60px;
   line-height: 60px;
-  border-radius: 30px;
+  border-radius: 12px;
   background: #d5e7f7;
   position: absolute;
   font-size: 20px !important;
@@ -310,17 +310,17 @@
   cursor: pointer;
   box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
   opacity: 1 !important;
+  transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
 }
 .tag-item:hover {
   font-weight: 650;
   color: #583a05 !important;
-  background-color: #f19a04 !important;
+  background: #f19a04 !important;
   z-index: 100 !important;
 }
 .tag-item.item2 {
   height: 50px;
   line-height: 50px;
-  border-radius: 25px;
   color: #1c3e5e;
   padding: 0 20px;
   font-size: 18px !important;
@@ -329,7 +329,6 @@
 .tag-item.item3 {
   height: 47px;
   line-height: 47px;
-  border-radius: 25px;
   color: #1c3e5e;
   padding: 0 16px;
   font-size: 16px !important;
@@ -338,7 +337,6 @@
 .tag-item.item4 {
   height: 30px;
   line-height: 30px;
-  border-radius: 30px;
   color: #1c3e5e;
   padding: 0 10px;
   font-size: 14px !important;
@@ -350,26 +348,31 @@
 }
 .bottom-play {
   position: fixed;
-  bottom: 0;
+  bottom: 10px;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 12px;
   width: 100%;
-  height: 76px;
+  padding: 12px 0;
-  background-color: #353535;
+  background-color: #000;
   z-index: 1000;
   justify-content: space-between;
+  align-items: flex-end;
   animation: fadeInUp 0.3s ease forwards;
-  min-width: 1200px;
+  width: 800px;
 }
 @keyframes fadeInUp {
   0% {
     bottom: -76px;
   }
   100% {
-    bottom: 0;
+    bottom: 10px;
   }
 }
 .bottom-play .bottom-left {
   padding-left: 12px;
+  height: 24px;
+  position: relative;
 }
 .bottom-play .bottom-left .img {
   width: 56px;
@@ -379,18 +382,19 @@
 .bottom-play .bottom-left .name {
   color: #fff;
   font-size: 14px;
-  font-weight: 600;
+  max-width: 300px;
-  margin-bottom: 6px;
-  max-width: 240px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: absolute;
+  left: 12px;
+  bottom: 0;
 }
 .bottom-play .bottom-middle {
   flex-direction: column;
 }
 .bottom-play .bottom-middle .operate {
-  margin-bottom: 10px;
+  height: 24px;
 }
 .bottom-play .bottom-middle .operate .cut {
   width: 14px;
@@ -451,6 +455,7 @@
 .bottom-play .bottom-right {
   justify-content: flex-end;
   padding-right: 12px;
+  height: 24px;
 }
 .bottom-play .bottom-right .item {
   position: relative;

static/css/song-request-station.less

@@ -287,7 +287,7 @@
                 .fill-item {
                     width: 33px;
                     height: 23px;
-                    border-radius: 100px;
+                    border-radius: 12px;
                     // background-color: rgba(255, 255, 255, 0.223529);
                     position: absolute;
                     cursor: pointer;
@@ -356,7 +356,8 @@
 .tag-item {
     height: 60px;
     line-height: 60px;
-    border-radius: 30px;
+    // border-radius: 30px;
+    border-radius: 12px;
     background: #d5e7f7;
     position: absolute;
     font-size: 20px !important;
@@ -366,18 +367,19 @@
     cursor: pointer;
     box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
     opacity: 1 !important;
+    transition: background 0.3s, color 0.3s, z-index 0.3s, font-weight 0.3s;
 
     &:hover {
         font-weight: 650;
-        color: rgb(88, 58, 5) !important;
+        color: #583a05 !important;
-        background-color: rgba(241, 154, 4, 1) !important;
+        background: rgba(241, 154, 4, 1) !important;
         z-index: 100 !important;
     }
 
     &.item2 {
         height: 50px;
         line-height: 50px;
-        border-radius: 25px;
+        // border-radius: 25px;
         color: #1c3e5e;
         padding: 0 20px;
         font-size: 18px !important;
@@ -387,7 +389,7 @@
     &.item3 {
         height: 47px;
         line-height: 47px;
-        border-radius: 25px;
+        // border-radius: 25px;
         color: #1c3e5e;
         padding: 0 16px;
         font-size: 16px !important;
@@ -397,7 +399,7 @@
     &.item4 {
         height: 30px;
         line-height: 30px;
-        border-radius: 30px;
+        // border-radius: 30px;
         color: #1c3e5e;
         padding: 0 10px;
         font-size: 14px !important;
@@ -408,19 +410,31 @@
         color: #62263c !important;
         background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
     }
+
+    // &.red:hover {
+    //     font-weight: 650;
+    //     color: #583a05 !important;
+    //     // background-color: rgba(241, 154, 4, 1) !important;
+    //     background-color: rgb(255, 255, 255) !important;
+    //     z-index: 100 !important;
+    // }
 }
 
 .bottom-play {
     position: fixed;
-    bottom: 0;
+    bottom: 10px;
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 12px;
     width: 100%;
-    height: 76px;
+    padding: 12px 0;
-    background-color: #353535;
+    background-color: #000;
     z-index: 1000;
     justify-content: space-between;
+    align-items: flex-end;
     animation: fadeInUp 0.3s ease forwards;
-    min-width: 1200px;
+    // min-width: 1200px;
+    width: 800px;
 
     @keyframes fadeInUp {
         0% {
@@ -428,12 +442,14 @@
         }
 
         100% {
-            bottom: 0;
+            bottom: 10px;
         }
     }
 
     .bottom-left {
         padding-left: 12px;
+        height: 24px;
+        position: relative;
 
         .img {
             width: 56px;
@@ -444,12 +460,16 @@
         .name {
             color: #fff;
             font-size: 14px;
-            font-weight: 600;
+            // font-weight: 600;
-            margin-bottom: 6px;
+            // margin-bottom: 6px;
-            max-width: 240px;
+            max-width: 300px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+
+            position: absolute;
+            left: 12px;
+            bottom: 0;
         }
     }
 
@@ -457,7 +477,7 @@
         flex-direction: column;
 
         .operate {
-            margin-bottom: 10px;
+            height: 24px;
 
             .cut {
                 width: 14px;
@@ -528,6 +548,7 @@
     .bottom-right {
         justify-content: flex-end;
         padding-right: 12px;
+        height: 24px;
 
         .item {
             position: relative;

static/img/guess/bj-mask.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1194px" height="129px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="960" y1="3174" x2="960" y2="3303" id="LinearGradient286">
+      <stop id="Stop287" stop-color="#5028a4" stop-opacity="0.725490196078431" offset="0" />
+      <stop id="Stop288" stop-color="#1f0f84" stop-opacity="0.709803921568627" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -363 -3174 )">
+    <path d="M 363 3174  L 1557 3174  L 1557 3283  A 20 20 0 0 1 1537 3303 L 383 3303  A 20 20 0 0 1 363 3283 L 363 3174  Z " fill-rule="nonzero" fill="url(#LinearGradient286)" stroke="none" />
+  </g>
+</svg>

static/js/index.js

@@ -459,7 +459,7 @@ const search = createApp({
             if (!isBarBottomDragging) return;
 
             // 获取音量进度条元素
-            const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
+            const progressBar = document.querySelector(".bottom-play .bottom-middle .progress-bar");
             if (!progressBar) return;
 
             const rect = progressBar.getBoundingClientRect();

static/js/music.json

@@ -1,221 +1,406 @@
 {
-    "code": 200,
+  "code": 200,
-    "data": [
+  "data": [
-        {
+    {
-            "tag": "彩虹泡泡",
+      "tag": "彩虹泡泡",
-            "songs": [
+      "songs": [
-                {
+        { "name": "彩虹的微笑", "path": "/music/rainbow_smile.mp3" },
-                    "name": "彩虹的秘密",
+        { "name": "泡泡飞舞", "path": "/music/bubble_dance.mp3" },
-                    "path": "/music/rainbow_secret.mp3"
+        { "name": "七彩梦境", "path": "/music/colorful_dream.mp3" },
-                },
+        { "name": "泡泡糖世界", "path": "/music/bubblegum_world.mp3" },
-                {
+        { "name": "彩虹之光", "path": "/music/rainbow_light.mp3" }
-                    "name": "泡泡飞舞",
+      ]
-                    "path": "/music/bubble_dance.mp3"
+    },
-                }
+    {
-            ]
+      "tag": "星际漫游",
-        },
+      "songs": [
-        {
+        { "name": "银河漫步", "path": "/music/galaxy_walk.mp3" },
-            "tag": "星际漫游",
+        { "name": "宇宙之旅", "path": "/music/space_journey.mp3" },
-            "songs": [
+        { "name": "星际迷航", "path": "/music/star_trek.mp3" },
-                {
+        { "name": "太空漫步", "path": "/music/space_walk.mp3" },
-                    "name": "银河漫游",
+        { "name": "银河系边缘", "path": "/music/galaxy_edge.mp3" },
-                    "path": "/music/galaxy_trip.mp3"
+        { "name": "星际穿越", "path": "/music/interstellar.mp3" }
-                },
+      ]
-                {
+    },
-                    "name": "星空遨游",
+    {
-                    "path": "/music/stars_voyage.mp3"
+      "tag": "开心到飞起",
-                }
+      "songs": [
-            ]
+        { "name": "快乐飞翔", "path": "/music/happy_flying.mp3" },
-        },
+        { "name": "笑到飞起", "path": "/music/laugh_high.mp3" },
-        {
+        { "name": "开心每一天", "path": "/music/happy_everyday.mp3" },
-            "tag": "开心到飞起",
+        { "name": "飞向快乐", "path": "/music/fly_to_happy.mp3" }
-            "songs": [
+      ]
-                {
+    },
-                    "name": "无忧快乐",
+    {
-                    "path": "/music/joyful_day.mp3"
+      "tag": "甜蜜时光",
-                }
+      "songs": [
-            ]
+        { "name": "甜蜜约定", "path": "/music/sweet_promise.mp3" },
-        },
+        { "name": "时光慢递", "path": "/music/slow_time.mp3" },
-        {
+        { "name": "甜蜜回忆", "path": "/music/sweet_memory.mp3" },
-            "tag": "甜蜜时光",
+        { "name": "蜜糖时光", "path": "/music/honey_time.mp3" },
-            "songs": [
+        { "name": "温柔时刻", "path": "/music/gentle_moment.mp3" },
-                {
+        { "name": "甜蜜陪伴", "path": "/music/sweet_company.mp3" },
-                    "name": "甜甜小记忆",
+        { "name": "幸福时光", "path": "/music/happy_time.mp3" }
-                    "path": "/music/sweet_memory.mp3"
+      ]
-                },
+    },
-                {
+    {
-                    "name": "美好时刻",
+      "tag": "探险",
-                    "path": "/music/beautiful_moment.mp3"
+      "songs": [
-                }
+        { "name": "丛林探险", "path": "/music/jungle_adventure.mp3" },
-            ]
+        { "name": "未知旅程", "path": "/music/unknown_journey.mp3" },
-        },
+        { "name": "探索新世界", "path": "/music/explore_new_world.mp3" },
-        {
+        { "name": "勇往直前", "path": "/music/brave_forward.mp3" },
-            "tag": "探险",
+        { "name": "神秘岛屿", "path": "/music/mystery_island.mp3" }
-            "songs": [
+      ]
-                {
+    },
-                    "name": "勇闯秘境",
+    {
-                    "path": "/music/adventure_secret.mp3"
+      "tag": "梦幻",
-                }
+      "songs": [
-            ]
+        { "name": "梦幻旋律", "path": "/music/dream_melody.mp3" },
-        },
+        { "name": "幻想曲", "path": "/music/fantasy.mp3" },
-        {
+        { "name": "梦中的世界", "path": "/music/dream_world.mp3" },
-            "tag": "梦幻",
+        { "name": "梦幻泡影", "path": "/music/dream_bubble.mp3" }
-            "songs": [
+      ]
-                {
+    },
-                    "name": "漫步梦境",
+    {
-                    "path": "/music/dream_walk.mp3"
+      "tag": "幻想曲",
-                },
+      "songs": [
-                {
+        { "name": "幻想交响曲", "path": "/music/fantasy_symphony.mp3" },
-                    "name": "幻想奇缘",
+        { "name": "幻想即兴曲", "path": "/music/fantasy_impromptu.mp3" },
-                    "path": "/music/fantasy_story.mp3"
+        { "name": "幻想变奏曲", "path": "/music/fantasy_variations.mp3" },
-                }
+        { "name": "幻想小夜曲", "path": "/music/fantasy_serenade.mp3" },
-            ]
+        { "name": "幻想曲集", "path": "/music/fantasy_collection.mp3" },
-        },
+        { "name": "幻想奏鸣曲", "path": "/music/fantasy_sonata.mp3" }
-        {
+      ]
-            "tag": "幻想曲",
+    },
-            "songs": [
+    {
-                {
+      "tag": "自由摇摆",
-                    "name": "魔法旋律",
+      "songs": [
-                    "path": "/music/magical_melody.mp3"
+        { "name": "自由舞动", "path": "/music/free_dance.mp3" },
-                }
+        { "name": "摇摆节奏", "path": "/music/swing_rhythm.mp3" },
-            ]
+        { "name": "自由爵士", "path": "/music/free_jazz.mp3" },
-        },
+        { "name": "摇摆人生", "path": "/music/swing_life.mp3" },
-        {
+        { "name": "自由即兴", "path": "/music/free_improvisation.mp3" }
-            "tag": "自由摇摆",
+      ]
-            "songs": [
+    },
-                {
+    {
-                    "name": "随风而舞",
+      "tag": "夏日狂欢",
-                    "path": "/music/dance_with_wind.mp3"
+      "songs": [
-                },
+        { "name": "夏日派对", "path": "/music/summer_party.mp3" },
-                {
+        { "name": "阳光沙滩", "path": "/music/sunny_beach.mp3" },
-                    "name": "自由律动",
+        { "name": "海边狂欢", "path": "/music/beach_carnival.mp3" },
-                    "path": "/music/free_groove.mp3"
+        { "name": "夏日冰饮", "path": "/music/summer_drink.mp3" },
-                }
+        { "name": "热带风情", "path": "/music/tropical_style.mp3" },
-            ]
+        { "name": "夏夜星空", "path": "/music/summer_night_sky.mp3" }
-        },
+      ]
-        {
+    },
-            "tag": "夏日狂欢",
+    {
-            "songs": [
+      "tag": "微风轻轻吹",
-                {
+      "songs": [
-                    "name": "阳光派对",
+        { "name": "微风拂面", "path": "/music/breeze_face.mp3" },
-                    "path": "/music/sunshine_party.mp3"
+        { "name": "轻风细雨", "path": "/music/gentle_rain.mp3" },
-                },
+        { "name": "风中絮语", "path": "/music/wind_whisper.mp3" },
-                {
+        { "name": "微风山谷", "path": "/music/breeze_valley.mp3" },
-                    "name": "夏夜节奏",
+        { "name": "风的私语", "path": "/music/wind_secret.mp3" }
-                    "path": "/music/summer_rhythm.mp3"
+      ]
-                }
+    },
-            ]
+    {
-        },
+      "tag": "江湖",
-        {
+      "songs": [
-            "tag": "微风轻轻吹",
+        { "name": "侠客行", "path": "/music/knight_journey.mp3" },
-            "songs": [
+        { "name": "刀剑如梦", "path": "/music/sword_dream.mp3" },
-                {
+        { "name": "笑傲江湖", "path": "/music/laugh_jianghu.mp3" },
-                    "name": "轻柔微风",
+        { "name": "侠义情深", "path": "/music/knight_love.mp3" },
-                    "path": "/music/gentle_breeze.mp3"
+        { "name": "江湖夜雨", "path": "/music/jianghu_night_rain.mp3" },
-                }
+        { "name": "沧海一声笑", "path": "/music/sea_laugh.mp3" }
-            ]
+      ]
-        },
+    },
-        {
+    {
-            "tag": "江湖",
+      "tag": "浪漫",
-            "songs": [
+      "songs": [
-                {
+        { "name": "浪漫星空", "path": "/music/romantic_sky.mp3" },
-                    "name": "剑歌少年",
+        { "name": "浪漫时光", "path": "/music/romantic_time.mp3" },
-                    "path": "/music/hero_ballad.mp3"
+        { "name": "浪漫邂逅", "path": "/music/romantic_encounter.mp3" },
-                }
+        { "name": "浪漫旋律", "path": "/music/romantic_melody.mp3" },
-            ]
+        { "name": "浪漫之夜", "path": "/music/romantic_night.mp3" }
-        },
+      ]
-        {
+    },
-            "tag": "浪漫",
+    {
-            "songs": [
+      "tag": "阳光正好",
-                {
+      "songs": [
-                    "name": "心动时分",
+        { "name": "阳光灿烂", "path": "/music/sunshine_bright.mp3" },
-                    "path": "/music/romantic_time.mp3"
+        { "name": "正好遇见你", "path": "/music/just_meet_you.mp3" },
-                },
+        { "name": "阳光路上", "path": "/music/sunshine_road.mp3" },
-                {
+        { "name": "温暖阳光", "path": "/music/warm_sunshine.mp3" },
-                    "name": "甜蜜心跳",
+        { "name": "阳光照进心里", "path": "/music/sunshine_heart.mp3" }
-                    "path": "/music/love_heartbeat.mp3"
+      ]
-                }
+    },
-            ]
+    {
-        },
+      "tag": "青草香",
-        {
+      "songs": [
-            "tag": "阳光正好",
+        { "name": "草原晨曲", "path": "/music/grassland_morning.mp3" },
-            "songs": [
+        { "name": "青草地", "path": "/music/grass_land.mp3" },
-                {
+        { "name": "草香四溢", "path": "/music/grass_fragrance.mp3" },
-                    "name": "晴天物语",
+        { "name": "青草摇曳", "path": "/music/grass_swing.mp3" },
-                    "path": "/music/cloudless_story.mp3"
+        { "name": "草原牧歌", "path": "/music/grassland_song.mp3" }
-                }
+      ]
-            ]
+    },
-        },
+    {
-        {
+      "tag": "赛博心跳",
-            "tag": "青草香",
+      "songs": [
-            "songs": [
+        { "name": "电子脉冲", "path": "/music/electronic_pulse.mp3" },
-                {
+        { "name": "数字心跳", "path": "/music/digital_heartbeat.mp3" },
-                    "name": "原野微风",
+        { "name": "机械律动", "path": "/music/mechanical_rhythm.mp3" },
-                    "path": "/music/field_breeze.mp3"
+        { "name": "电流涌动", "path": "/music/current_surge.mp3" },
-                },
+        { "name": "赛博都市", "path": "/music/cyber_city.mp3" },
-                {
+        { "name": "数据流", "path": "/music/data_flow.mp3" }
-                    "name": "绿色时光",
+      ]
-                    "path": "/music/green_time.mp3"
+    },
-                }
+    {
-            ]
+      "tag": "赛博空间",
-        },
+      "songs": [
-        {
+        { "name": "虚拟现实", "path": "/music/virtual_reality.mp3" },
-            "tag": "赛博心跳",
+        { "name": "网络漫游", "path": "/music/network_roaming.mp3" },
-            "songs": [
+        { "name": "数据海洋", "path": "/music/data_ocean.mp3" },
-                {
+        { "name": "赛博迷宫", "path": "/music/cyber_maze.mp3" },
-                    "name": "虚拟律动",
+        { "name": "电子宇宙", "path": "/music/electronic_universe.mp3" }
-                    "path": "/music/cyber_heartbeat.mp3"
+      ]
-                },
+    },
-                {
+    {
-                    "name": "脉动交响",
+      "tag": "节奏大师",
-                    "path": "/music/cyber_beats.mp3"
+      "songs": [
-                }
+        { "name": "节奏之王", "path": "/music/rhythm_king.mp3" },
-            ]
+        { "name": "鼓点狂欢", "path": "/music/drum_carnival.mp3" },
-        },
+        { "name": "节奏游戏", "path": "/music/rhythm_game.mp3" },
-        {
+        { "name": "律动人生", "path": "/music/rhythm_life.mp3" },
-            "tag": "赛博空间",
+        { "name": "节奏与灵魂", "path": "/music/rhythm_soul.mp3" }
-            "songs": [
+      ]
-                {
+    },
-                    "name": "未来之眼",
+    {
-                    "path": "/music/future_sight.mp3"
+      "tag": "快乐节拍",
-                }
+      "songs": [
-            ]
+        { "name": "欢乐节拍", "path": "/music/happy_beat.mp3" },
-        },
+        { "name": "快乐舞曲", "path": "/music/happy_dance.mp3" },
-        {
+        { "name": "节拍欢歌", "path": "/music/beat_song.mp3" },
-            "tag": "节奏大师",
+        { "name": "快乐音符", "path": "/music/happy_note.mp3" },
-            "songs": [
+        { "name": "跳跃节奏", "path": "/music/jumping_rhythm.mp3" }
-                {
+      ]
-                    "name": "极限节拍",
+    },
-                    "path": "/music/ultimate_beat.mp3"
+    {
-                }
+      "tag": "自由鼓点",
-            ]
+      "songs": [
-        },
+        { "name": "自由敲击", "path": "/music/free_hit.mp3" },
-        {
+        { "name": "鼓点狂想", "path": "/music/drum_fantasy.mp3" },
-            "tag": "民谣",
+        { "name": "自由节奏", "path": "/music/free_rhythm.mp3" },
-            "songs": [
+        { "name": "鼓点即兴", "path": "/music/drum_improvisation.mp3" },
-                {
+        { "name": "自由打击", "path": "/music/free_percussion.mp3" }
-                    "name": "悠然时光",
+      ]
-                    "path": "/music/folk_time.mp3"
+    },
-                }
+    {
-            ]
+      "tag": "悲伤的角落",
-        },
+      "songs": [
-        {
+        { "name": "角落里的泪", "path": "/music/corner_tears.mp3" },
-            "tag": "去旅行",
+        { "name": "悲伤回忆", "path": "/music/sad_memory.mp3" },
-            "songs": [
+        { "name": "孤独空间", "path": "/music/lonely_space.mp3" },
-                {
+        { "name": "泪的痕迹", "path": "/music/tear_trace.mp3" },
-                    "name": "旅途光影",
+        { "name": "心碎角落", "path": "/music/heartbreak_corner.mp3" }
-                    "path": "/music/journey_lights.mp3"
+      ]
-                }
+    },
-            ]
+    {
-        },
+      "tag": "一个人的狂欢",
-        {
+      "songs": [
-            "tag": "学习BGM",
+        { "name": "独自狂欢", "path": "/music/alone_carnival.mp3" },
-            "songs": [
+        { "name": "一人派对", "path": "/music/one_person_party.mp3" },
-                {
+        { "name": "孤独欢乐", "path": "/music/lonely_joy.mp3" },
-                    "name": "静心阅读",
+        { "name": "一个人的舞台", "path": "/music/one_person_stage.mp3" },
-                    "path": "/music/study_focus.mp3"
+        { "name": "独自摇摆", "path": "/music/alone_swing.mp3" }
-                }
+      ]
-            ]
+    },
-        }
+    {
-    ]
+      "tag": "经典金曲",
+      "songs": [
+        { "name": "永恒经典", "path": "/music/eternal_classic.mp3" },
+        { "name": "金曲回放", "path": "/music/golden_replay.mp3" },
+        { "name": "不朽名曲", "path": "/music/immortal_song.mp3" },
+        { "name": "经典重现", "path": "/music/classic_reproduction.mp3" },
+        { "name": "金曲珍藏", "path": "/music/golden_collection.mp3" },
+        { "name": "经典传承", "path": "/music/classic_inheritance.mp3" }
+      ]
+    },
+    {
+      "tag": "民谣",
+      "songs": [
+        { "name": "乡间小路", "path": "/music/country_road.mp3" },
+        { "name": "吉他与诗", "path": "/music/guitar_poem.mp3" },
+        { "name": "民谣故事", "path": "/music/folk_story.mp3" },
+        { "name": "城市民谣", "path": "/music/city_folk.mp3" },
+        { "name": "民谣之声", "path": "/music/folk_voice.mp3" },
+        { "name": "木吉他旋律", "path": "/music/acoustic_melody.mp3" }
+      ]
+    },
+    {
+      "tag": "摇滚",
+      "songs": [
+        { "name": "摇滚精神", "path": "/music/rock_spirit.mp3" },
+        { "name": "电吉他之声", "path": "/music/electric_guitar.mp3" },
+        { "name": "摇滚革命", "path": "/music/rock_revolution.mp3" },
+        { "name": "硬摇滚", "path": "/music/hard_rock.mp3" },
+        { "name": "摇滚青春", "path": "/music/rock_youth.mp3" },
+        { "name": "摇滚传奇", "path": "/music/rock_legend.mp3" }
+      ]
+    },
+    {
+      "tag": "古风",
+      "songs": [
+        { "name": "千年之约", "path": "/music/thousand_year_promise.mp3" },
+        { "name": "墨香古韵", "path": "/music/ink_ancient_rhyme.mp3" },
+        { "name": "青丝白发", "path": "/music/black_white_hair.mp3" },
+        { "name": "琴瑟和鸣", "path": "/music/instruments_harmony.mp3" },
+        { "name": "长安忆", "path": "/music/changan_memory.mp3" },
+        { "name": "山水清音", "path": "/music/landscape_sound.mp3" }
+      ]
+    },
+    {
+      "tag": "去旅行",
+      "songs": [
+        { "name": "旅行的意义", "path": "/music/travel_meaning.mp3" },
+        { "name": "背包客", "path": "/music/backpacker.mp3" },
+        { "name": "远方的呼唤", "path": "/music/distant_call.mp3" },
+        { "name": "旅途中", "path": "/music/on_journey.mp3" },
+        { "name": "出发吧", "path": "/music/lets_go.mp3" }
+      ]
+    },
+    {
+      "tag": "在路上",
+      "songs": [
+        { "name": "公路之歌", "path": "/music/highway_song.mp3" },
+        { "name": "一路向前", "path": "/music/forward.mp3" },
+        { "name": "旅途风景", "path": "/music/journey_scenery.mp3" },
+        { "name": "在路上", "path": "/music/on_the_road.mp3" },
+        { "name": "行走的力量", "path": "/music/walking_power.mp3" }
+      ]
+    },
+    {
+      "tag": "学习BGM",
+      "songs": [
+        { "name": "专注时刻", "path": "/music/focus_moment.mp3" },
+        { "name": "学习氛围", "path": "/music/study_atmosphere.mp3" },
+        { "name": "思考空间", "path": "/music/thinking_space.mp3" },
+        { "name": "安静阅读", "path": "/music/quiet_reading.mp3" },
+        { "name": "效率提升", "path": "/music/efficiency_improvement.mp3" }
+      ]
+    },
+    {
+      "tag": "运动健身",
+      "songs": [
+        { "name": "热血沸腾", "path": "/music/hot_blood.mp3" },
+        { "name": "健身节奏", "path": "/music/fitness_rhythm.mp3" },
+        { "name": "运动激情", "path": "/music/sports_passion.mp3" },
+        { "name": "跑步节拍", "path": "/music/running_beat.mp3" },
+        { "name": "力量训练", "path": "/music/strength_training.mp3" },
+        { "name": "健身房热曲", "path": "/music/gym_hot_song.mp3" }
+      ]
+    },
+    {
+      "tag": "派对聚会",
+      "songs": [
+        { "name": "派对之王", "path": "/music/party_king.mp3" },
+        { "name": "聚会舞曲", "path": "/music/party_dance.mp3" },
+        { "name": "欢乐时光", "path": "/music/happy_time.mp3" },
+        { "name": "派对节奏", "path": "/music/party_rhythm.mp3" },
+        { "name": "狂欢之夜", "path": "/music/carnival_night.mp3" },
+        { "name": "聚会必备", "path": "/music/party_essential.mp3" }
+      ]
+    },
+    {
+      "tag": "约会浪漫",
+      "songs": [
+        { "name": "浪漫晚餐", "path": "/music/romantic_dinner.mp3" },
+        { "name": "约会之夜", "path": "/music/date_night.mp3" },
+        { "name": "烛光晚餐", "path": "/music/candle_dinner.mp3" },
+        { "name": "浪漫时刻", "path": "/music/romantic_moment.mp3" },
+        { "name": "甜蜜约会", "path": "/music/sweet_date.mp3" }
+      ]
+    },
+    {
+      "tag": "旅行路上",
+      "songs": [
+        { "name": "旅途风景", "path": "/music/journey_scenery.mp3" },
+        { "name": "公路之歌", "path": "/music/highway_song.mp3" },
+        { "name": "旅行日记", "path": "/music/travel_diary.mp3" },
+        { "name": "异国风情", "path": "/music/exotic_style.mp3" },
+        { "name": "旅途中的歌", "path": "/music/song_on_journey.mp3" }
+      ]
+    },
+    {
+      "tag": "助眠放松",
+      "songs": [
+        { "name": "深度睡眠", "path": "/music/deep_sleep.mp3" },
+        { "name": "轻松入眠", "path": "/music/easy_sleep.mp3" },
+        { "name": "安眠曲", "path": "/music/lullaby.mp3" },
+        { "name": "夜晚静谧", "path": "/music/night_quiet.mp3" },
+        { "name": "舒缓心灵", "path": "/music/soothe_mind.mp3" }
+      ]
+    },
+    {
+      "tag": "专注工作/学习",
+      "songs": [
+        { "name": "专注时刻", "path": "/music/focus_moment.mp3" },
+        { "name": "高效工作", "path": "/music/efficient_work.mp3" },
+        { "name": "思维空间", "path": "/music/thinking_space.mp3" },
+        { "name": "学习氛围", "path": "/music/study_atmosphere.mp3" },
+        { "name": "专注力提升", "path": "/music/focus_improvement.mp3" }
+      ]
+    },
+    {
+      "tag": "通勤路上",
+      "songs": [
+        { "name": "早晨通勤", "path": "/music/morning_commute.mp3" },
+        { "name": "城市节奏", "path": "/music/city_rhythm.mp3" },
+        { "name": "地铁之声", "path": "/music/subway_sound.mp3" },
+        { "name": "公交旅程", "path": "/music/bus_journey.mp3" },
+        { "name": "上下班音乐", "path": "/music/commute_music.mp3" }
+      ]
+    },
+    {
+      "tag": "解压宣泄",
+      "songs": [
+        { "name": "压力释放", "path": "/music/pressure_release.mp3" },
+        { "name": "情绪宣泄", "path": "/music/emotion_vent.mp3" },
+        { "name": "怒吼一声", "path": "/music/roar.mp3" },
+        { "name": "释放自我", "path": "/music/release_self.mp3" },
+        { "name": "压力消除", "path": "/music/pressure_elimination.mp3" }
+      ]
+    },
+    {
+      "tag": "生日祝福",
+      "songs": [
+        { "name": "生日快乐", "path": "/music/happy_birthday.mp3" },
+        { "name": "温馨祝福", "path": "/music/warm_blessing.mp3" },
+        { "name": "生日派对", "path": "/music/birthday_party.mp3" },
+        { "name": "祝福之歌", "path": "/music/blessing_song.mp3" },
+        { "name": "幸福时刻", "path": "/music/happy_moment.mp3" }
+      ]
+    },
+    {
+      "tag": "影视配乐",
+      "songs": [
+        { "name": "电影主题", "path": "/music/movie_theme.mp3" },
+        { "name": "剧情转折", "path": "/music/plot_twist.mp3" },
+        { "name": "情感渲染", "path": "/music/emotion_rendering.mp3" },
+        { "name": "史诗场景", "path": "/music/epic_scene.mp3" },
+        { "name": "温情时刻", "path": "/music/warm_moment.mp3" }
+      ]
+    },
+    {
+      "tag": "绘本音乐",
+      "songs": [
+        { "name": "童话世界", "path": "/music/fairy_tale_world.mp3" },
+        { "name": "绘本旋律", "path": "/music/picture_book_melody.mp3" },
+        { "name": "想象空间", "path": "/music/imagination_space.mp3" },
+        { "name": "童年回忆", "path": "/music/childhood_memory.mp3" },
+        { "name": "故事音乐", "path": "/music/story_music.mp3" }
+      ]
+    }
+  ]
 }

static/js/song-request-station.js

@@ -124,10 +124,8 @@ const search = createApp({
         const audioPlayer = ref(null);
 
         const clickSongs = (songs) => {
-            console.log("songs", songs.length);
             const randomIndex = Math.floor(Math.random() * songs.length);
             const item = songs[randomIndex];
-            console.log("随机选择的 item:", item);
             manageAudio(item);
         };
 
@@ -136,12 +134,12 @@ const search = createApp({
             const audio = audioPlayer.value;
             closeAll();
             setTimeout(() => {
-                if (audio?.src != item.path) audio.src = item.path;
+                console.log("item", item);
 
+                if (audio?.src != item.path) audio.src = item.path;
                 // audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
-                audio.play().then(() => {
+                audio.src = "/static/mp3/1.MP3";
-                    playData.value = { ...item, state: true };
+                audio.play().then(() => (playData.value = { ...item, state: true }));
-                });
             }, 500);
         };
 
@@ -250,18 +248,17 @@ const search = createApp({
             // 更新时间显示
             currentTimeFormatted.value = formatTime(currentTime);
             durationFormatted.value = formatTime(duration);
-
-            console.log("p", p);
         };
 
         // 快进 和 后退 10秒
         const fastForward = (type = "fast") => {
             if (!audioPlayer.value) return;
-            const src = playData.value?.playurl || "";
+            console.log("playData.value", playData.value);
-            const area = playData.value?.area || "";
+
+            const src = playData.value?.path || "";
 
             if (audioPlayer.value.src != src) {
-                manageAudio(src, area);
+                manageAudio(playData.value);
                 return;
             }
 
@@ -312,11 +309,14 @@ const search = createApp({
         };
 
         const handleBarDragBottomDrag = (event) => {
+            // console.log("event", event);
+
             if (!isBarBottomDragging) return;
 
             // 获取音量进度条元素
-            const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
+            const progressBar = document.querySelector(".bottom-play .bottom-middle .progress-bar");
             if (!progressBar) return;
+            console.log("14111111111");
 
             const rect = progressBar.getBoundingClientRect();
 
@@ -326,6 +326,7 @@ const search = createApp({
             dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
 
             const percentage = dragPosition / rect.width;
+
             updatePlay(percentage);
         };
 
@@ -335,9 +336,10 @@ const search = createApp({
             let newTime = duration * percentage;
             newTime = Math.max(0, Math.min(duration, newTime));
             audioPlayer.value.currentTime = newTime;
+
             getProgress();
         };
 
-        return { handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
+        return { startBarDragBottom, handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
     },
 }).mount("#song-request-station");