add audio

README.md

@@ -39,6 +39,7 @@
 - 本抽奖程序无暗箱操作，无后台，无后门。
 - 名单和照片显示只需导入一种即可,无导入数据则使用抽奖号码。
 - 建议使用最新的 Chrome 浏览器打开体验最佳。
+- 由于背景游戏音乐加载较慢，可以在抽奖前提前打开缓存好。
 
 ## License
 

src/App.vue

@@ -68,7 +68,15 @@
       </div>
     </transition>
 
-    <el-button class="audio" type="text" @click="audioPlaying = !audioPlaying">
+    <el-button
+      class="audio"
+      type="text"
+      @click="
+        () => {
+          playAudio(!audioPlaying);
+        }
+      "
+    >
       <i
         class="iconfont"
         :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
@@ -96,6 +104,7 @@
       autoplay
       loop
       @play="playHandler"
+      @pause="pauseHandler"
     >
       <source :src="audioSrc" />
       你的浏览器不支持audio标签
@@ -231,9 +240,6 @@ export default {
           this.reloadTagCanvas();
         });
       }
-    },
-    audioPlaying(v) {
-      this.playAudio(v);
     }
   },
   mounted() {
@@ -246,6 +252,9 @@ export default {
     playHandler() {
       this.audioPlaying = true;
     },
+    pauseHandler() {
+      this.audioPlaying = false;
+    },
     playAudio(type) {
       if (type) {
         this.$el.querySelector('#audiobg').play();