音乐功能

src/App.vue

@@ -6,9 +6,28 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import BottomBar from './components/BottomBar.vue'
+
 export default {
   components: { BottomBar },
+  computed: {
+    ...mapState([
+      'isMuted'
+    ]),
+  },
+  watch: {
+    isMuted: {
+      handler(vNew) {
+        const audioNode = document.getElementById('global-audio')
+        if (vNew) {
+          audioNode.volume = 0
+        } else {
+          audioNode.volume = 1
+        }
+      }
+    }
+  }
 }
 </script>
 

src/config.js

@@ -27,4 +27,7 @@ export default {
       children: {},
     },
   },
+  audioName: {
+    relicsAppr: '清晨氛围',
+  }
 }

src/main.js

@@ -9,6 +9,12 @@ import clickOutside from "@/directives/v-click-outside.js"
 
 console.log(globalConfig.version)
 
+// 供全局使用的audio节点
+const audioNode = document.createElement("audio")
+audioNode.id = 'global-audio'
+audioNode.style.display = 'none'
+document.body.appendChild(audioNode)
+
 const uaParser = new UAParser()
 const uaInfo = uaParser.getResult()
 Vue.prototype.$uaInfo = uaInfo

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
     path: '/',
     name: 'HomeView',
     component: HomeView,
+    beforeEnter (to, from, next) {
+      const audioNode = document.getElementById('global-audio')
+      audioNode.pause()
+      next()
+    }
   },
   {
     path: '/relics-appr',
@@ -30,7 +35,15 @@ const routes = [
           canFullScreen: false,
         }
       },
-    ]
+    ],
+    beforeEnter (to, from, next) {
+      const audioNode = document.getElementById('global-audio')
+      if (audioNode.src !== require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)) {
+        audioNode.src = require(`@/assets/audios/${globalConfig.audioName.relicsAppr}.mp3`)
+        audioNode.play()
+      }
+      next()
+    },
   },
   {
     path: '/about',