对比

src/views/bookShelf/components/HistoryRecordList.vue

@@ -26,7 +26,7 @@
         <div class="list-item">
             <div class="item-top">
                 <h4><svg-icon icon-class="History"></svg-icon>历史记录 {{showList[activeIndex].create_time.substring(0,16)}}</h4>
-                <i class="el-icon-close" @click="showItem=false"></i>
+                <i class="el-icon-close" @click="closeItemHistory"></i>
             </div>
             <div class="item-center">
                 <div class="item-sent">
@@ -95,7 +95,7 @@
                         <svg-icon icon-class="Go-start" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                         <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">上一句</span>
                     </div>
-                    <div class="operate-item">
+                    <div class="operate-item" @click="compare">
                         <svg-icon icon-class="Type-drive" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
                         <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">听对比</span>
                     </div>
@@ -175,8 +175,11 @@ export default {
         "”",
       ],
       audio: new window.Audio(),
+      audioc: new window.Audio(), // 对比
       timeCur: null,
-      isPlay: false
+      isPlay: false,
+      oldIndex: null,
+      timeC: null
     }
   },
   //计算属性 类似于data概念
@@ -225,6 +228,12 @@ export default {
         this.showItem = true
     },
     changePlaySent(type){
+        if (!this.audio.paused) {
+            this.audio.pause();
+        } 
+        if (!this.audioc.paused) {
+            this.audioc.pause();
+        } 
         if(type==='-'){
             if(this.activeIndex>0){
                 this.activeIndex--
@@ -240,30 +249,28 @@ export default {
         }
     },
     playmicrophone() {
-      if (this.hasMicro) {
-        this.isPlayings = true;
-        if (this.selectIndex || this.selectIndex == 0) {
-          let _this = this;
-          if (!this.audio.paused) {
+        let _this = this;
+        this.audioc.pause()
+        if(this.parentPlay){
+            this.$emit("handleChangeTime",this.curTime,this.timeData.e,true)
+        }
+        if (!this.audio.paused) {
             this.audio.pause();
-          } else if (this.audio.paused && _this.oldIndex == _this.selectIndex) {
+        } else if (this.audio.paused && _this.oldIndex == _this.activeIndex) {
             _this.audio.play();
-            if (_this.recordtime == 0) {
-              _this.playtime = 0;
-            }
-          } else {
+        } else {
             _this.audio.pause();
             _this.audio.load();
-            _this.audio.src = _this.wavblob;
-            _this.oldIndex = _this.selectIndex;
+            _this.audio.src = _this.showList[_this.activeIndex].rec_sound_data;
+            _this.oldIndex = _this.activeIndex;
             _this.audio.play();
-          }
         }
-      }
     },
     // 播放句子
     playSent(){
         let _this = this
+        _this.audio.pause();
+        _this.audioc.pause();
         if(_this.curTime>=_this.timeData.e){
             _this.curTime = _this.timeData.s
         }
@@ -281,6 +288,42 @@ export default {
         if (time>=0) {
             this.curTime = time;
         }
+    },
+    // 对比
+    compare(){
+        let _this = this;
+        this.audio.pause()
+        if (!this.audioc.paused) {
+            this.audioc.pause();
+        } else {
+            _this.audioc.pause();
+            _this.audioc.load();
+            _this.curTime = _this.timeData.s
+            _this.$emit("handleChangeTime",_this.timeData.s,_this.timeData.e)
+            _this.timeC = setInterval(() => {
+                if(_this.curTime>=_this.timeData.e){
+                    console.log(_this.curTime)
+                    clearInterval(_this.timeC)
+                    _this.playWavdata()
+                }
+            }, 500);
+        }
+
+    },
+    playWavdata(){
+        let _this = this;
+        _this.audioc.src = _this.showList[_this.activeIndex].rec_sound_data;
+        _this.audioc.play();
+    },
+    closeItemHistory(){
+        this.showItem = !this.showItem
+        this.audio.pause();
+        this.audioc.pause();
+        if(this.parentPlay){
+            this.$emit("handleChangeTime",this.curTime,this.timeData.e,true)
+        }
+        clearInterval(this.timeCur)
+        clearInterval(this.timeC)
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -296,6 +339,7 @@ export default {
   //生命周期-挂载之前
   beforeMount() { 
     clearInterval(this.timeCur)
+    clearInterval(this.timeC)
   },
   //生命周期-更新之前
   beforUpdate() { },