From be83a79b05268eb375b14fe4c89f107dbd15a55e Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Thu, 21 Dec 2023 18:09:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(Audio):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=B7=B3=E8=BD=AC=E6=97=B6=20=E9=9F=B3?=
 =?UTF-8?q?=E4=B9=90=E4=B8=80=E7=9B=B4=E6=92=AD=E6=94=BE=E6=9A=82=E5=81=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  9 +++++++++
 src/layout/components/PlayBar.vue | 12 +++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c99f0b6..b26f2d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="app">
+    <audio id="MusicAudio" ref="audioRef" :src="playMusicUrl" :autoplay="play"></audio>
     <n-config-provider :theme="darkTheme">
       <n-dialog-provider>
         <router-view></router-view>
@@ -10,7 +11,15 @@
 
 <script lang="ts" setup>
 import { darkTheme } from 'naive-ui'
+import { ref, computed } from 'vue'
+import { useStore } from 'vuex'
 
+const audio = ref<HTMLAudioElement | null>(null)
+
+const store = useStore()
+const playMusicUrl = computed(() => store.state.playMusicUrl as string)
+// 是否播放
+const play = computed(() => store.state.play as boolean)
 
 </script>
 
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 0396d36..e667630 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 展开全屏 -->
-  <music-full ref="MusicFullRef" v-model:musicFull="musicFull" :audio="(audio as HTMLAudioElement)" />
+  <music-full ref="MusicFullRef" v-model:musicFull="musicFull" :audio="(audio.value as HTMLAudioElement)" />
   <!-- 底部播放栏 -->
   <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
     <n-image
@@ -76,7 +76,7 @@
       </n-tooltip>
     </div>
     <!-- 播放音乐 -->
-    <audio ref="audio" :src="playMusicUrl" :autoplay="play"></audio>
+    
   </div>
 </template>
 
@@ -99,8 +99,11 @@ const store = useStore()
 const playMusic = computed(() => store.state.playMusic as SongResult)
 // 是否播放
 const play = computed(() => store.state.play as boolean)
-// 播放链接
-const playMusicUrl = computed(() => store.state.playMusicUrl as string)
+
+const audio = {
+  value: document.querySelector('#MusicAudio') as HTMLAudioElement
+}
+
 watch(
   () => store.state.playMusicUrl,
   () => {
@@ -142,7 +145,6 @@ onMounted(() => {
   }
 })
 
-const audio = ref<HTMLAudioElement | null>(null)
 
 
 const audioPlay = () => {