测试后台音频播放问题

@@ -10,6 +10,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
+    AudioBackground1: typeof import('./src/components/audioBackground1.vue')['default']
+    copy: typeof import('./src/components/audioBackground copy.vue')['default']
     Floor: typeof import('./src/components/Floor/index.vue')['default']
     InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
     InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']

+<!--
+ * @Date: 2023-06-12 11:23:10
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-09-21 10:57:29
+ * @FilePath: /map-demo/src/components/audioBackground1.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div v-if="audio_src" class="audio-background-page">
+    <div @click="handleAudio" :class="['icon', audio_status === 'pause' ? 'play' : 'pause']"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { mainStore } from '@/store'
+import $ from 'jquery';
+
+export default {
+  data () {
+    return {
+    }
+  },
+  mounted () {
+
+  },
+  computed: {
+    ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
+  },
+  methods: {
+    ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
+    handleAudio () {
+      if (this.audio_status === 'play') {
+        this.audio_entity.pause();
+        this.changeAudioStatus('pause');
+      } else {
+        this.audio_entity.play();
+        this.changeAudioStatus('play');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.audio-background-page {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 17rem;
+  .icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-size: contain;
+  }
+
+  .play {
+    background-image: url('https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png');
+  }
+  .pause {
+    background-image: url('https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png');
+    animation: rotate 4s linear infinite;
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .paused {
+    animation-play-state: paused;
+  }
+}
+</style>

 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-20 18:19:58
+ * @LastEditTime: 2024-09-21 10:49:05
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -110,7 +110,7 @@ import { storeToRefs } from 'pinia'
 import { mainStore } from '@/store';
 
 const store = mainStore();
-const { audio_status } = storeToRefs(store);
+const { audio_status, audio_entity } = storeToRefs(store);
 
 const $route = useRoute();
 const $router = useRouter();
@@ -146,6 +146,10 @@ const audioList = ref([{
 const playAudio = (item, index) => {
   audioList.value.forEach(item => item.play = false);
   audio.value.src = item.src;
+  // 后台有播放器运行时，先暂停
+  if (audio_status.value === 'play'){
+    audio_entity.value.pause();
+  }
   play_audio_index.value = index;
   let play_status = audio.value.play() // 播放
   if (play_status) {
@@ -154,8 +158,9 @@ const playAudio = (item, index) => {
       console.warn('success');
       item.play = true;
       // 存放到pinia里面控制
-      // store.changeAudioSrc(audio.value.src);
-      // store.changeAudioStatus('play');
+      store.changeAudio(audio.value);
+      store.changeAudioSrc(audio.value.src);
+      store.changeAudioStatus('play');
     }).catch((e) => {
       // 失败
       console.log('Operation is too fast, audio play fails')
@@ -171,14 +176,9 @@ const stopAudio = (item, index) => {
 const audio = ref(new Audio());
 
 onMounted(() => {
-  // 存放到pinia里面控制
-  if (store.changeAudio(audio.value)){
-    store.changeAudio(audio.value);
-    store.changeAudioStatus('pause');
-  }
 })
 
-onUnmounted(() => {
+onUnmounted(() => { // 离开页面时关闭音频播放
   audio.value.pause();
   store.changeAudioStatus('pause');
 })

 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-20 18:30:30
+ * @LastEditTime: 2024-09-21 11:01:31
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -57,7 +57,8 @@
       <div style="padding: 1rem; text-align: center;">{{ dialog_text }}</div>
     </van-dialog>
 
-    <!-- <audioBackground></audioBackground> -->
+    <!-- 背景音乐控制 -->
+    <!-- <audioBackground1></audioBackground1> -->
   </div>
 </template>
 
@@ -72,7 +73,7 @@ import { useRect } from '@vant/use';
 import { mapAPI } from '@/api/map.js'
 import wx from 'weixin-js-sdk'
 import pageInfo from '@/views/bieyuan/info.vue'
-import audioBackground from '@/components/audioBackground'
+import audioBackground1 from '@/components/audioBackground1.vue'
 import { mapState, mapActions } from 'pinia'
 import { mainStore } from '@/store'
 
@@ -133,7 +134,7 @@ const GPS = {
 };
 
 export default {
-  components: { pageInfo, audioBackground },
+  components: { pageInfo, audioBackground1 },
   data() {
     return {
       map: '',