添加音乐解析

.env.development

@@ -1,2 +1,3 @@
 VITE_API=/api
-VITE_API_MT=/mt
+VITE_API_MT=/mt
+VITE_API_MUSIC = /music

.env.production

@@ -1,2 +1,3 @@
 VITE_API=http://123.56.226.179:3000
-VITE_API_MT=http://mt.myalger.top
+VITE_API_MT=http://mt.myalger.top
+VITE_API_MUSIC=http://myalger.top:4000

src/api/music.ts

@@ -1,12 +1,17 @@
-import { IPlayMusicUrl } from "@/type/music";
-import { ILyric } from "@/type/lyric";
-import request from "@/utils/request";
+import { IPlayMusicUrl } from "@/type/music"
+import { ILyric } from "@/type/lyric"
+import request from "@/utils/request"
+import requestMusic from "@/utils/request_music"
 // 根据音乐Id获取音乐播放URl
 export const getMusicUrl = (id: number) => {
-  return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } });
-};
+  return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } })
+}
 
 // 根据音乐Id获取音乐歌词
 export const getMusicLrc = (id: number) => {
-  return request.get<ILyric>("/lyric", { params: { id: id } });
-};
+  return request.get<ILyric>("/lyric", { params: { id: id } })
+}
+
+export const getParsingMusicUrl = (id: number) => {
+  return requestMusic.get<any>("/music", { params: { id: id } })
+}

src/layout/components/PlayBar.vue

@@ -69,8 +69,24 @@
             <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
         </div>
         <div class="audio-button">
-            <i class="iconfont icon-likefill"></i>
-            <i class="iconfont icon-full" @click="setMusicFull"></i>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-likefill"></i>
+                </template>
+                喜欢
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-Play" @click="parsingMusic"></i>
+                </template>
+                解析播放
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+                <template #trigger>
+                    <i class="iconfont icon-full" @click="setMusicFull"></i>
+                </template>
+                歌词
+            </n-tooltip>
         </div>
         <!-- 播放音乐 -->
         <audio ref="audio" :src="playMusicUrl" :autoplay="play"></audio>
@@ -84,7 +100,8 @@ import { secondToMinute } from "@/utils";
 import { computed, onMounted, ref, watch } from "vue";
 import { useStore } from 'vuex';
 import { setAnimationClass } from "@/utils";
-import { getMusicLrc } from "@/api/music"
+import { getMusicLrc, getParsingMusicUrl } from "@/api/music"
+
 
 const store = useStore();
 
@@ -217,6 +234,12 @@ const setMusicFull = () => {
     }
 }
 
+// 解析音乐
+const parsingMusic = async () => {
+    const { data } = await getParsingMusicUrl(playMusic.value.id)
+    store.state.playMusicUrl = data.data.url
+}
+
 const musicFullClass = computed(() => {
     if (musicFull.value) {
         return setAnimationClass('animate__fadeInUp')

src/utils/request_music.ts

@@ -0,0 +1,19 @@
+import axios from "axios"
+let baseURL = import.meta.env.VITE_API_MUSIC + ""
+const request = axios.create({
+  baseURL: baseURL,
+  timeout: 10000,
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => {
+    // 当请求异常时做一些处理
+    return Promise.reject(error)
+  }
+)
+
+export default request

vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import path from "path";
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from "path"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -25,6 +25,11 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
+      "/music": {
+        target: "http://myalger.top:4000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/music/, ""),
+      },
     },
   },
-});
+})