热点添加背景音，自动播放时机优化。

src/views/HomeMobile.vue

@@ -4,8 +4,6 @@
       ref="bg-audio"
       class="bg-audio"
       :src="bgAudioUrl"
-      loop
-      autoplay
     />
 
     <button
@@ -21,8 +19,8 @@
 
     <div class="title-wrapper">
       <h1
-        :title="hotspotTextInfo.title"
-        v-html="hotspotTextInfo.title"
+        :title="hotspotLocalInfo.title"
+        v-html="hotspotLocalInfo.title"
       />
       <img
         src="@/assets/images/title-bottom-line.png"
@@ -170,14 +168,14 @@
         @click="isBgAudioMuted = !isBgAudioMuted"
       >
         <img
-          v-show="isBgAudioMuted"
+          v-show="!isBgAudioMuted"
           class="bg-audio-control"
           src="@/assets/images/bg-audio-mobile.png"
           alt=""
           draggable="false"
         >
         <img
-          v-show="!isBgAudioMuted"
+          v-show="isBgAudioMuted"
           class="bg-audio-control"
           src="@/assets/images/bg-audio-mobile-muted.png"
           alt=""
@@ -224,21 +222,21 @@
           <ul>
             <li>
               <span class="key">时代：</span>
-              <span class="value">{{ hotspotTextInfo.age }}</span>
+              <span class="value">{{ hotspotLocalInfo.age }}</span>
             </li>
             <li>
               <span class="key">出土地：</span>
-              <span class="value">{{ hotspotTextInfo.position }}</span>
+              <span class="value">{{ hotspotLocalInfo.position }}</span>
             </li>
             <li>
               <span class="key">尺寸：</span>
-              <span class="value">{{ hotspotTextInfo.size }}</span>
+              <span class="value">{{ hotspotLocalInfo.size }}</span>
             </li>
             <li>
               <span class="key">介绍：</span>
               <span
                 class="value"
-                v-html="hotspotTextInfo.desc"
+                v-html="hotspotLocalInfo.desc"
               />
             </li>
           </ul>
@@ -267,15 +265,15 @@ import 'swiper/swiper-bundle.css'
 import bgImg from "@/assets/images/bg.png"
 import { deepProcess } from "@/utils/other.js"
 // import browser from "@/utils/browser";
-import hotspotData from "@/assets/data/hotspotData.js"
+import hotspotLocalData from "@/assets/data/hotspotData.js"
 
 export default {
   data() {
     return {
       hotspotData: {}, // 热点数据
 
-      bgAudioUrl: "", //背景音频url
-      isBgAudioMuted: false,
+      // bgAudioUrl: "", //背景音频url
+      isBgAudioMuted: true,
 
       isShowImages: false,
       isShowVideos: false,
@@ -289,12 +287,15 @@ export default {
     }
   },
   computed: {
-    hotspotTextInfo() {
-      const ret = hotspotData.find((item) => {
+    hotspotLocalInfo() {
+      const ret = hotspotLocalData.find((item) => {
         return item.id === this.$route.query.m
       })
       return ret
     },
+    bgAudioUrl() {
+      return this.hotspotLocalInfo?.audio ? require(`@/assets/audios/${this.hotspotLocalInfo.audio}`) : ''
+    }
   },
   watch: {
     isBgAudioMuted: {
@@ -308,6 +309,11 @@ export default {
     }
   },
   async mounted() {
+    setTimeout(() => {
+      if (this.bgAudioUrl) {
+        this.isBgAudioMuted = false
+      }
+    }, 2000)
     await this.getData()
     this.$nextTick(() => {
       const that = this
@@ -384,10 +390,11 @@ export default {
         this.isShowVideos = true
       } else if (this.hotspotData.model && this.hotspotData.model.length) {
         this.isShowModels = true
-      } else if (this.hotspotData.backgroundMusic) {
-        this.isShowAudios = true
-        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
       }
+      //  else if (this.hotspotData.backgroundMusic) {
+      //   this.isShowAudios = true
+      //   this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
+      // }
     },
     onClickClose() {
       window.parent.document.getElementById('closepop').click()

src/views/HomeWeb.vue

@@ -7,8 +7,6 @@
       ref="bg-audio"
       class="bg-audio"
       :src="bgAudioUrl"
-      loop
-      autoplay
     />
 
     <button
@@ -28,11 +26,11 @@
       }"
     >
       <h1
-        :title="hotspotTextInfo.title"
+        :title="hotspotLocalInfo.title"
         :style="{
           backgroundImage: `url(${titleBottomLine})`,
         }"
-        v-html="hotspotTextInfo.title"
+        v-html="hotspotLocalInfo.title"
       />
       <div
         class="textInfo"
@@ -40,21 +38,21 @@
         <ul>
           <li>
             <span class="key">时代：</span>
-            <span class="value">{{ hotspotTextInfo.age }}</span>
+            <span class="value">{{ hotspotLocalInfo.age }}</span>
           </li>
           <li>
             <span class="key">出土地：</span>
-            <span class="value">{{ hotspotTextInfo.position }}</span>
+            <span class="value">{{ hotspotLocalInfo.position }}</span>
           </li>
           <li>
             <span class="key">尺寸：</span>
-            <span class="value">{{ hotspotTextInfo.size }}</span>
+            <span class="value">{{ hotspotLocalInfo.size }}</span>
           </li>
           <li>
             <span class="key">介绍：</span>
             <span
               class="value"
-              v-html="hotspotTextInfo.desc"
+              v-html="hotspotLocalInfo.desc"
             />
           </li>
         </ul>
@@ -65,14 +63,14 @@
           @click="isBgAudioMuted = !isBgAudioMuted"
         >
           <img
-            v-show="isBgAudioMuted"
+            v-show="!isBgAudioMuted"
             class="bg-audio-control"
             src="@/assets/images/bg-audio.png"
             alt=""
             draggable="false"
           >
           <img
-            v-show="!isBgAudioMuted"
+            v-show="isBgAudioMuted"
             class="bg-audio-control"
             src="@/assets/images/bg-audio-muted.png"
             alt=""
@@ -271,15 +269,15 @@ import bgImg from "@/assets/images/bg.png"
 import titleBottomLine from "@/assets/images/title-bottom-line.png"
 import { deepProcess } from "@/utils/other.js"
 // import browser from "@/utils/browser";
-import hotspotData from "@/assets/data/hotspotData.js"
+import hotspotLocalData from "@/assets/data/hotspotData.js"
 
 export default {
   data() {
     return {
       hotspotData: {}, // 热点数据
 
-      bgAudioUrl: "", //背景音频url
-      isBgAudioMuted: false,
+      // bgAudioUrl: "", //背景音频url
+      isBgAudioMuted: true,
 
       isShowImages: false,
       isShowVideos: false,
@@ -294,12 +292,15 @@ export default {
     }
   },
   computed: {
-    hotspotTextInfo() {
-      const ret = hotspotData.find((item) => {
+    hotspotLocalInfo() {
+      const ret = hotspotLocalData.find((item) => {
         return item.id === this.$route.query.m
       })
       return ret
     },
+    bgAudioUrl() {
+      return this.hotspotLocalInfo?.audio ? require(`@/assets/audios/${this.hotspotLocalInfo.audio}`) : ''
+    }
   },
   watch: {
     isBgAudioMuted: {
@@ -313,6 +314,11 @@ export default {
     }
   },
   async mounted() {
+    setTimeout(() => {
+      if (this.bgAudioUrl) {
+        this.isBgAudioMuted = false
+      }
+    }, 2000)
     await this.getData()
     this.$nextTick(() => {
       const that = this
@@ -410,10 +416,11 @@ export default {
         this.isShowVideos = true
       } else if (this.hotspotData.model && this.hotspotData.model.length) {
         this.isShowModels = true
-      } else if (this.hotspotData.backgroundMusic) {
-        this.isShowAudios = true
-        this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
       }
+      //  else if (this.hotspotData.backgroundMusic) {
+      //   this.isShowAudios = true
+      //   this.hotspotData.audio = [{ url: this.hotspotData.backgroundMusic }]
+      // }
     },
     onClickClose() {
       window.parent.document.getElementById('closepop').click()