首页也有背景音乐

src/config.js

@@ -39,8 +39,9 @@ export default {
     },
   },
   audioName: {
-    relicsAppr: '清晨氛围',
+    homeView: '清晨氛围',
     swkkView: '清晨氛围',
     obliqueAndPano: '清晨氛围',
+    relicsAppr: '清晨氛围',
   }
 }

src/router/index.js

@@ -18,7 +18,11 @@ const routes = [
     component: HomeView,
     beforeEnter (to, from, next) {
       const audioNode = document.getElementById('global-audio')
-      audioNode.pause()
+      // audioNode.pause()
+      if (from.name && audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)) {
+        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)
+        audioNode.play()
+      }
       next()
     }
   },

src/views/HomeView.vue

@@ -13,24 +13,36 @@
           playsinline
           x5-playsinline
           webkit-playsinline
-          @ended="isShowVideo = false"
+          @ended="onVideoHide"
         />
         <button
           class="skip"
           :class="{ active: isShowSkip }"
-          @click="isShowVideo = false"
+          @click="onVideoHide"
         >
           <span>跳过</span>
         </button>
       </div>
     </transition>
 
+    <button
+      class="music"
+      @click="toggleMute"
+    >
+      <img
+        :src="isMuted ? require('@/assets/images/music-muted-homepage.png') : require('@/assets/images/music-homepage.png')"
+        alt="声音"
+        draggable="false"
+      >
+    </button>
+
     <img
       class="title"
       src="@/assets/images/title.png"
       alt="雨花台烈士纪念馆"
       draggable="false"
     >
+
     <div class="button-group">
       <router-link
         class="router-link"
@@ -88,6 +100,11 @@ export default {
       isShowVideo: false,
     }
   },
+  computed: {
+    ...globalMapState([
+      'isMuted',
+    ])
+  },
   mounted() {
     setTimeout(() => {
       this.isShowSkip = true
@@ -101,6 +118,17 @@ export default {
         this.isShowVideo = false
       })
     }
+  },
+  methods: {
+    ...globalMapMutations([
+      'toggleMute',
+    ]),
+    onVideoHide() {
+      this.isShowVideo = false
+      const audioNode = document.getElementById('global-audio')
+      audioNode.src = require(`@/assets/audios/${globalConfig.audioName.homeView}.mp3`)
+      audioNode.play()
+    }
   }
 }
 </script>
@@ -152,6 +180,17 @@ export default {
     }
   }
 
+  button.music {
+    position: absolute;
+    width: 3.08rem;
+    height: 3.08rem;
+    top: 1.1rem;
+    right: 1.79rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
   .title {
     position: absolute;
     width: 39.63rem;