.

src/App.vue

@@ -1,12 +1,16 @@
 <template>
   <div id="app">
+    <bg-music />
     <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    BgMusic: () => import('./components/BgMusic.vue')
+  }
 }
 </script>
 

src/components/BgMusic.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
+    <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BgMusic',
+  data() {
+    const { origin, pathname } = window.location
+
+    return {
+      show: false,
+      playing: false,
+      url: `${origin}${pathname}bg.mp3`
+    }
+  },
+  mounted() {
+    document.body.addEventListener("click", this.handleClick);
+
+    this.$nextTick(() => {
+      this.handleIOSAudio()
+    })
+
+  },
+  methods: {
+    handleIOSAudio() {
+      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+      if (isiOS) {
+        document.addEventListener('WeixinJSBridgeReady', () => {
+          this.$refs.audioRef.load()
+        }, false)
+      }
+    },
+    handleClick() {
+      if (!this.show || !this.$refs.audioRef) return;
+
+      if (this.playing) {
+        this.$refs.audioRef.pause();
+      } else {
+        this.$refs.audioRef.play();
+      }
+
+      this.playing = !this.playing
+    },
+
+    handlePlay() {
+      document.body.removeEventListener("click", this.handleClick);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg-music {
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  z-index: 10;
+
+  width: 2em;
+  height: 2em;
+  background-image: url('../assets/indexImg/play.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  &.icon-playing {
+    background-image: url('../assets/indexImg/paused.png');
+    animation: musicrotate 3s linear infinite;
+  }
+
+  & > audio {
+    max-width: 1px;
+    max-height: 1px;
+  }
+}
+
+@keyframes musicrotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>