录音控制播放 选中颜色 增加放大缩小按钮，播放方式选中播放

src/components/Adult/preview/Voicefullscreen.vue

@@ -518,6 +518,15 @@
       <!-- v-show="patternType == '录音模式'" -->
       <div class="waveform-wrapper" v-show="patternType == '录音模式'">
         <div class="big">
+          <div class="zoom_dv">
+            <div class="remove" @click="bigZoom('remove')">
+              <img src="../../../assets/NPC/qp-remove.png" alt="" />
+            </div>
+            <!-- <div class="text"></div> -->
+            <div class="add" @click="bigZoom('add')">
+              <img src="../../../assets/NPC/qp-add.png" alt="" />
+            </div>
+          </div>
           <div
             :class="[playList.indexOf('yp') != -1 ? 'play_erji' : 'erji']"
             v-if="LYstatus != '未开始'"
@@ -537,10 +546,20 @@
               id="waveform_big"
               ref="waveform_big"
             />
+
             <div id="timeline" ref="timeline"></div>
           </div>
         </div>
         <div class="big" id="ly_big" style="display: none">
+          <div class="zoom_dv">
+            <div class="remove" @click="lyZoom('remove')">
+              <img src="../../../assets/NPC/qp-remove.png" alt="" />
+            </div>
+            <!-- <div class="text"></div> -->
+            <div class="add" @click="lyZoom('add')">
+              <img src="../../../assets/NPC/qp-add.png" alt="" />
+            </div>
+          </div>
           <div
             :class="[playList.indexOf('ly') != -1 ? 'play_erji' : 'erji']"
             @click="selepaly('ly')"
@@ -693,7 +712,13 @@
             </template>
           </div>
           <div v-if="patternType == '录音模式'">
-            <div class="cuttentime">{{ ShowcurentTime }}</div>
+            <div class="cuttentime">
+              {{
+                playList.indexOf("ly") != -1
+                  ? ly_ShowcurentTime
+                  : ShowcurentTime
+              }}
+            </div>
             <div class="operate">
               <img
                 v-if="LYstatus == '录音中'"
@@ -1114,7 +1139,8 @@ export default {
       wavesurfer_big: null,
       loading: null,
       timer: null,
-      ShowcurentTime: 0,
+      ShowcurentTime: "00:00",
+      ly_ShowcurentTime: "00:00",
       LYstatus: "未开始",
       startLyShow: false,
       //波浪图-录音
@@ -1126,7 +1152,7 @@ export default {
       pCanvas: null,
       pCtx: null,
       zoomNumber: 0,
-      lyzoomNumber: 1500,
+      lyzoomNumber: 0,
       xunhunShow: false,
       regionData: null,
       LY_regionData: null,
@@ -1198,6 +1224,30 @@ export default {
   },
   //方法集合
   methods: {
+    bigZoom(type) {
+      if (type == "add") {
+        this.zoomNumber = this.zoomNumber + 100;
+      } else {
+        if (this.zoomNumber == 0) {
+          return;
+        }
+        this.zoomNumber = this.zoomNumber - 100;
+      }
+      let time = this.wavesurfer_big.getCurrentTime();
+      this.wavesurfer_big.zoom(Number(this.zoomNumber), time);
+    },
+    lyZoom(type) {
+      if (type == "add") {
+        this.lyzoomNumber = this.lyzoomNumber + 100;
+      } else {
+        if (this.lyzoomNumber == 0) {
+          return;
+        }
+        this.lyzoomNumber = this.lyzoomNumber - 100;
+      }
+      let time = wavesurfer_ly.getCurrentTime();
+      wavesurfer_ly.zoom(Number(this.lyzoomNumber), time);
+    },
     // 对比播放
     comparisonPlay() {
       this.stopAllPlayStart();
@@ -1254,7 +1304,8 @@ export default {
       this.regionData = null;
       this.LY_regionData = null;
       this.speedIndex = 3;
-      this.ShowcurentTime = 0;
+      this.ShowcurentTime = "00:00";
+      this.ly_ShowcurentTime = "00:00";
       this.curTime = 0;
       this.LY_curTime = 0;
       this.xunhunShow = false;
@@ -1326,13 +1377,10 @@ export default {
       if (this.LYstatus == "未开始") {
         return;
       }
-      let index = this.playList.indexOf(type);
-      if (index != -1) {
-        this.playList.splice(index, 1);
-      } else {
-        this.playList.push(type);
-      }
-      this.playMusic(this.isPlaying ? "puse" : "play");
+      this.playList = [];
+      this.playList.push(type);
+
+      // this.playMusic(this.isPlaying ? "puse" : "play");
     },
     startCanvas() {
       //录音波浪
@@ -1381,7 +1429,7 @@ export default {
       } else {
         that.lyzoomNumber = that.lyzoomNumber + 100;
       }
-      that.wavesurfer_ly.zoom(Number(that.lyzoomNumber), this.zoomTime);
+      wavesurfer_ly.zoom(Number(that.lyzoomNumber), this.zoomTime);
     },
     // 初始化声波
     initaudioImage(audioRate, isPlaying) {
@@ -1473,7 +1521,7 @@ export default {
         that.wavesurfer_big.on("ready", function (e) {
           if (!that.regionData) {
             that.wavesurfer_big.enableDragSelection({
-              color: "rgba(0, 180, 0, 0.5)",
+              color: "rgba(255, 255, 255, 0.2)",
             });
             that.wavesurfer_big.clearRegions(); // 音频加载完成
           }
@@ -1489,11 +1537,39 @@ export default {
           that.$forceUpdate();
         });
       });
+
       // 更新区域时。回调将接收该Region对象。
       that.wavesurfer_big.on("region-updated", function (region) {
         // region.playLoop(); // 循环播放选中区域
         // region.play()
         that.regionData = region;
+        let strt_time = that.regionData.start.toFixed(2);
+        let end_time = that.regionData.end.toFixed(2);
+        let arr = strt_time.split(".");
+        let arr2 = end_time.split(".");
+        let newtime = "";
+        arr.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime += item + ":";
+          } else {
+            newtime += item;
+          }
+        });
+        let newtime2 = "";
+        arr2.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime2 += item + ":";
+          } else {
+            newtime2 += item;
+          }
+        });
+        that.ShowcurentTime = newtime + "-" + newtime2;
       });
       that.wavesurfer_big.on("region-created", () => {
         that.wavesurfer_big.clearRegions();
@@ -1504,8 +1580,6 @@ export default {
       });
       that.wavesurfer_big.on("pause", function (e) {
         that.isPlaying = false;
-        that.playList = [];
-
         let time = that.wavesurfer_big.getCurrentTime();
         if (that.xunhunShow) {
           if (!that.regionData) {
@@ -1544,10 +1618,50 @@ export default {
                 }
               }
             }
+          } else {
+            if (that.regionData) {
+              if (time.toFixed(2) == that.regionData.end.toFixed(2)) {
+                let strt_time = that.regionData.start.toFixed(2);
+                let end_time = that.regionData.end.toFixed(2);
+                let arr = strt_time.split(".");
+                let arr2 = end_time.split(".");
+                let newtime = "";
+                arr.forEach((item, i) => {
+                  if (item.length == 1) {
+                    item = "0" + item;
+                  }
+                  if (i == 0) {
+                    newtime += item + ":";
+                  } else {
+                    newtime += item;
+                  }
+                });
+                let newtime2 = "";
+                arr2.forEach((item, i) => {
+                  if (item.length == 1) {
+                    item = "0" + item;
+                  }
+                  if (i == 0) {
+                    newtime2 += item + ":";
+                  } else {
+                    newtime2 += item;
+                  }
+                });
+                that.ShowcurentTime = newtime + "-" + newtime2;
+              }
+            } else {
+              if (time * 1000 == that.ed) {
+                that.ShowcurentTime = "00:00";
+              }
+            }
           }
         }
       });
       that.wavesurfer_big.on("interaction", function (e) {
+        // if (that.regionData) {
+        //   that.regionData = null;
+        //   that.initaudioImage(null, false);
+        // }
         that.isPlaying = false;
         that.stopPlay();
       });
@@ -1667,10 +1781,12 @@ export default {
 
       wavesurfer_ly.load(_this.LY_url);
       wavesurfer_ly.on("ready", function (e) {
-        wavesurfer_ly.zoom(Number(1500));
+        wavesurfer_ly.zoom(Number(0));
+        _this.wavesurfer_big.zoom(0);
+
         if (!_this.LY_regionData) {
           wavesurfer_ly.enableDragSelection({
-            color: "rgba(0, 180, 0, 0.3)",
+            color: "rgba(255, 255, 255, 0.2)",
           });
           wavesurfer_ly.clearRegions(); // 音频加载完成
         }
@@ -1686,7 +1802,6 @@ export default {
 
       wavesurfer_ly.on("pause", function (e) {
         _this.isPlaying = false;
-        _this.playList = [];
         let time = wavesurfer_ly.getCurrentTime();
         if (_this.xunhunShow) {
           if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
@@ -1699,14 +1814,30 @@ export default {
             }
           }
         } else {
-          if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
-            _this.comparisonPlayStatus = false;
+          if (_this.LY_regionData) {
+            if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
+              _this.comparisonPlayStatus = false;
+            }
           }
         }
       });
       wavesurfer_ly.on("audioprocess", function (e) {
         _this.playList = ["ly"];
         _this.LY_curTime = e * 1000;
+        let time = e.toFixed(2);
+        let arr = time.split(".");
+        let newtime = "";
+        arr.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime += item + ":";
+          } else {
+            newtime += item;
+          }
+        });
+        _this.ly_ShowcurentTime = newtime;
       });
       wavesurfer_ly.on("finish", function (e) {
         if (_this.xunhunShow) {
@@ -1718,6 +1849,8 @@ export default {
             _this.playList = ["ly"];
             _this.playMusic("play");
           }
+        } else {
+          _this.ly_ShowcurentTime = "00:00";
         }
       });
 
@@ -1726,6 +1859,33 @@ export default {
         // region.playLoop(); // 循环播放选中区域
         // region.play()
         _this.LY_regionData = region;
+        let strt_time = _this.LY_regionData.start.toFixed(2);
+        let end_time = _this.LY_regionData.end.toFixed(2);
+        let arr = strt_time.split(".");
+        let arr2 = end_time.split(".");
+        let newtime = "";
+        arr.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime += item + ":";
+          } else {
+            newtime += item;
+          }
+        });
+        let newtime2 = "";
+        arr2.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime2 += item + ":";
+          } else {
+            newtime2 += item;
+          }
+        });
+        _this.ly_ShowcurentTime = newtime + "-" + newtime2;
       });
       wavesurfer_ly.on("region-created", () => {
         wavesurfer_ly.clearRegions();
@@ -2332,7 +2492,7 @@ export default {
             if (time * 1000 == this.ed || this.curTime * 1000 == 0) {
               this.wavesurfer_big.play(start, end);
             } else {
-              this.wavesurfer_big.play(this.curTime / 1000, end);
+              this.wavesurfer_big.play(time, end);
             }
           }
         }
@@ -2458,9 +2618,47 @@ export default {
 .waveform-wrapper {
   .big {
     display: flex;
+    position: relative;
     .big_dv2 {
       flex: 1;
     }
+    .zoom_dv {
+      position: absolute;
+      right: 4px;
+      top: 4px;
+      display: flex;
+      z-index: 1;
+      .add {
+        margin-left: 4px;
+      }
+      .add,
+      .remove {
+        width: 24px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid #424242;
+        border-radius: 3px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .text {
+        width: 64px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid #424242;
+        border-radius: 3px;
+        text-align: center;
+        line-height: 24px;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0 4px;
+      }
+      img {
+        width: 14px;
+        height: 14px;
+      }
+    }
   }
   .ly {
     .play_erji {