✨ feat(music): 添加自动解析 并修改获取url的逻辑

.env.production

@@ -1,4 +1,4 @@
 VITE_API = http://110.42.251.190:9898
 VITE_API_MT = http://mt.myalger.top
-VITE_API_MUSIC = http://myalger.top:4000
+VITE_API_MUSIC = http://110.42.251.190:4100
 VITE_API_PROXY = http://110.42.251.190:9856

src/hooks/MusicHook.ts

@@ -1,5 +1,6 @@
 import { getMusicLrc } from '@/api/music'
 import { ILyric } from '@/type/lyric'
+import { getIsMc } from '@/utils'
 import { ref } from 'vue'
 
 interface ILrcData {
@@ -89,6 +90,17 @@ const setAudioTime = (index: any, audio: HTMLAudioElement) => {
   audio.play()
 }
 
+const ProxyUrl =
+  import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'
+
+const getMusicProxyUrl = (url: string) => {
+  if (!getIsMc()) {
+    return url
+  }
+  const PUrl = url.split('').join('+')
+  return `${ProxyUrl}/mc?url=${PUrl}`
+}
+
 export {
   lrcData,
   lrcArray,
@@ -101,4 +113,5 @@ export {
   setAudioTime,
   nowTime,
   allTime,
+  getMusicProxyUrl,
 }

src/layout/components/PlayBar.vue

@@ -62,12 +62,12 @@
         </template>
         喜欢
       </n-tooltip>
-      <n-tooltip trigger="hover">
+      <!-- <n-tooltip trigger="hover">
         <template #trigger>
           <i class="iconfont icon-Play" @click="parsingMusic"></i>
         </template>
         解析播放
-      </n-tooltip>
+      </n-tooltip> -->
       <n-tooltip trigger="hover">
         <template #trigger>
           <i class="iconfont icon-full" @click="setMusicFull"></i>
@@ -90,7 +90,7 @@ import { getParsingMusicUrl } from '@/api/music'
 import {
   loadLrc,
   nowTime,
-  allTime,
+  allTime
 } from '@/hooks/MusicHook'
 import MusicFull from './MusicFull.vue'
 
@@ -101,40 +101,10 @@ const playMusic = computed(() => store.state.playMusic as SongResult)
 // 是否播放
 const play = computed(() => store.state.play as boolean)
 // 播放链接
-const ProxyUrl =
-  import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'
-const playMusicUrl = ref('')
+const playMusicUrl = computed(() => store.state.playMusicUrl as string)
 watch(
   () => store.state.playMusicUrl,
-  async (value, oldValue) => {
-    const isUrlHasMc = getIsMc()
-    if (value && isUrlHasMc) {
-      let playMusicUrl1 = value as string
-      if (!ProxyUrl) {
-        playMusicUrl.value = playMusicUrl1
-        return
-      }
-      const url = new URL(playMusicUrl1)
-      const pathname = url.pathname
-      const subdomain = url.origin.split('.')[0].split('//')[1]
-      playMusicUrl1 = `${ProxyUrl}/mc?m=${subdomain}&url=${pathname}`
-      // console.log('playMusicUrl1', playMusicUrl1)
-      // // 获取音频文件
-      // const { data } = await axios.get(playMusicUrl1, {
-      //   responseType: 'blob'
-      // })
-      // const musicUrl = URL.createObjectURL(data)
-      // console.log('musicUrl', musicUrl)
-      // playMusicUrl.value = musicUrl
-      playMusicUrl.value = playMusicUrl1
-      console.log('playMusicUrl1', playMusicUrl1)
-      setTimeout(() => {
-        onAudio()
-        store.commit('setPlayMusic', true)
-      }, 100)
-    } else {
-      playMusicUrl.value = value
-    }
+  () => {
     loadLrc(playMusic.value.id)
   },
   { immediate: true }
@@ -156,16 +126,6 @@ onMounted(() => {
       }
     }
   )
-
-  watch(
-    () => playMusicUrl.value,
-    (value, oldValue) => {
-      if (!value) {
-        parsingMusic()
-      }
-    }
-  )
-
   // 抬起键盘按钮监听
   document.onkeyup = (e) => {
     switch (e.code) {

src/store/index.ts

@@ -1,7 +1,8 @@
 import { createStore } from "vuex";
 import { SongResult } from "@/type/music";
-import { getMusicUrl } from "@/api/music";
-import homeRouter from "@/router/home";
+import { getMusicUrl, getParsingMusicUrl } from '@/api/music'
+import homeRouter from '@/router/home'
+import { getMusicProxyUrl } from '@/hooks/MusicHook'
 
 interface State {
   menus: any[]
@@ -56,15 +57,22 @@ const mutations = {
 }
 
 const getSongUrl = async (id: number) => {
-  const { data } = await getMusicUrl(id);
-  console.log(data.data[0].url);
-
-  return data.data[0].url;
-};
+  const { data } = await getMusicUrl(id)
+  try {
+    if (data.data[0].freeTrialInfo) {
+      const res = await getParsingMusicUrl(id)
+      return res.data.data.url
+    }
+  } catch (error) {
+    console.error('error', error)
+  }
+  return data.data[0].url
+}
 
 const updatePlayMusic = async (state: State) => {
   state.playMusic = state.playList[state.playListIndex]
-  state.playMusicUrl = await getSongUrl(state.playMusic.id)
+  const playMusicUrl = await getSongUrl(state.playMusic.id)
+  state.playMusicUrl = getMusicProxyUrl(playMusicUrl)
   state.play = true
 }
 

vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
       '/music': {
-        target: 'http://myalger.top:4000',
+        target: 'http://110.42.251.190:4100',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/music/, ''),
       },