Browse Source

暂停播放

natasha 3 years ago
parent
commit
eb2669b12b

+ 8 - 0
src/components/Adult/preview/AudioLine.vue

@@ -254,6 +254,14 @@ export default {
           }
         });
         this.$refs[audioId].play();
+      }else{
+            let audio = document.getElementsByTagName("audio");
+            audio.forEach((item) => {
+                if (item.id !== audioId) {
+                    item.pause();
+                }
+            });
+            this.$refs[audioId].pause();
       }
     },
     // 将整数转换成 时:分:秒的格式

+ 29 - 5
src/components/Adult/preview/SelectTone.vue

@@ -27,7 +27,7 @@
               ? 'active'
               : '',
           ]"
-          @click="handleChangeTime(curQue.wordTime[index].bg)"
+          @click="handleChangeTime(curQue.wordTime[index].bg,curQue.wordTime[index].ed)"
         ></a>
         <!-- <Audio
           :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
@@ -67,6 +67,7 @@ export default {
       userSelect: [],
       curTime: "",
       stopAudio: false,
+      timer: null,
     };
   },
   computed: {},
@@ -84,28 +85,51 @@ export default {
     handleClick(index, indexs) {
       this.$set(this.userSelect, index, indexs);
     },
-    handleChangeTime(time) {
+    handleChangeTime(time,edTime) {
       let _this = this;
       _this.curTime = time;
+      _this.stopAudio = true
       _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
+      _this.timer = setInterval(() => {
+          if(_this.curTime >= edTime){
+              _this.stopAudio = false
+              _this.$refs.audioLine.onTimeupdateTime(_this.curTime / 1000, false);
+              clearInterval(_this.timer);
+          }
+      }, 200);
     },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
     handleListenRead(playFlag) {
       this.stopAudio = playFlag;
+      if(this.timer){
+          clearInterval(this.timer);
+      }
     },
   },
   //生命周期 - 创建完成(可以访问当前this实例)
-  created() {},
+  created() {
+      if(this.timer){
+          clearInterval(this.timer);
+      }
+  },
   //生命周期 - 挂载完成(可以访问DOM元素)
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
+  beforeDestroy() {
+      if(this.timer){
+          clearInterval(this.timer);
+      }
+  }, //生命周期 - 销毁之前
+  destroyed() {
+      if(this.timer){
+          clearInterval(this.timer);
+      }
+  }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>