✨ feat: 优化播放条和mv播放时没有暂停音乐的问题

src/layout/AppLayout.vue

@@ -42,7 +42,59 @@ const store = useStore();
 
 const isPlay = computed(() => store.state.isPlay as boolean)
 const menus = store.state.menus;
+const play = computed(() => store.state.play as boolean)
 
+const audio = {
+  value: document.querySelector('#MusicAudio') as HTMLAudioElement
+}
+
+onMounted(() => {
+  // 监听音乐是否播放
+  watch(
+    () => play.value,
+    value => {
+      if (value && audio.value) {
+        audioPlay()
+      } else {
+        audioPause()
+      }
+    }
+  )
+
+  document.onkeyup = (e) => {
+    switch (e.code) {
+      case 'Space':
+        playMusicEvent()
+    }
+  }
+  // 按下键盘按钮监听
+  document.onkeydown = (e) => {
+    switch (e.code) {
+      case 'Space':
+        return false
+    }
+  }
+})
+
+const audioPlay = () => {
+  if (audio.value) {
+    audio.value.play()
+  }
+}
+
+const audioPause = () => {
+  if (audio.value) {
+    audio.value.pause()
+  }
+}
+
+const playMusicEvent = async () => {
+  if (play.value) {
+    store.commit('setPlayMusic', false)
+  } else {
+    store.commit('setPlayMusic', true)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/components/PlayBar.vue

@@ -131,41 +131,6 @@ watch(
   },
   { immediate: true }
 )
-// 获取音乐播放Dom
-
-
-
-onMounted(() => {
-  // 监听音乐是否播放
-  watch(
-    () => play.value,
-    (value, oldValue) => {
-      if (value && audio.value) {
-        audioPlay()
-        onAudio()
-      } else {
-        audioPause()
-      }
-    }
-  )
-  // 抬起键盘按钮监听
-  document.onkeyup = (e) => {
-    switch (e.code) {
-      case 'Space':
-        playMusicEvent()
-    }
-  }
-
-  // 按下键盘按钮监听
-  document.onkeydown = (e) => {
-    switch (e.code) {
-      case 'Space':
-        return false
-    }
-  }
-})
-
-
 
 const audioPlay = () => {
   if (audio.value) {
@@ -179,7 +144,6 @@ const audioPause = () => {
   }
 }
 
-
 // 计算属性  获取当前播放时间的进度
 const timeSlider = computed({
   get: () => (nowTime.value / allTime.value) * 100,
@@ -227,6 +191,8 @@ const onAudio = () => {
   }
 }
 
+onAudio()
+
 function handleEnded() {
   store.commit('nextPlay')
 }