录音对比功能实现，

录音播放时选择速度和循环状态
录音选择区域后播放时选择速度和循环状态

src/components/Adult/preview/Voicefullscreen.vue

@@ -695,16 +695,27 @@
             <div class="cuttentime">{{ ShowcurentTime }}</div>
             <div class="operate">
               <img
+                v-if="LYstatus == '录音中'"
+                src="../../../assets/NPC/qp-back-gray.png"
+                alt=""
+                style="width: 48px; height: 48px"
+              />
+              <img
+                v-else
                 src="../../../assets/NPC/qp-back.png"
                 alt=""
                 style="width: 48px; height: 48px"
                 @click="backStatus"
               />
               <div
-                :class="['speed', speedListShow ? 'speed_sele' : '']"
+                :class="[
+                  'speed',
+                  speedListShow ? 'speed_sele' : '',
+                  LYstatus == '录音中' ? 'gray_speed' : '',
+                ]"
                 @click="speedListShowEvent"
               >
-                <div v-if="speedListShow" class="speedList">
+                <div v-if="speedListShow" :class="['speedList']">
                   <div
                     v-for="(item, i) in speedList"
                     :key="i + 'speedList'"
@@ -716,44 +727,61 @@
                 {{ speedList[speedIndex] }}×
               </div>
               <img
-                v-show="isPlaying"
-                @click="playMusic('pause')"
-                src="../../../assets/NPC/pause-fill.png"
-                alt=""
-                style="width: 16px; height: 24px"
-              />
-              <img
-                v-show="!isPlaying"
-                @click="playMusic('play')"
-                src="../../../assets/NPC/play-fill.png"
-                alt=""
-                style="width: 21px; height: 24px"
-              />
-              <img
-                src="../../../assets/NPC/qp-xunhuan-sele.png"
+                v-if="LYstatus == '录音中'"
+                src="../../../assets/NPC/play-fill-gray.png"
                 alt=""
                 style="width: 48px; height: 48px"
-                @click="circulationPlay"
-                v-if="xunhunShow"
               />
+              <template v-else>
+                <img
+                  v-show="isPlaying"
+                  @click="playMusic('pause')"
+                  src="../../../assets/NPC/pause-fill.png"
+                  alt=""
+                  style="width: 16px; height: 24px"
+                />
+                <img
+                  v-show="!isPlaying"
+                  @click="playMusic('play')"
+                  src="../../../assets/NPC/play-fill.png"
+                  alt=""
+                  style="width: 21px; height: 24px"
+                />
+              </template>
               <img
-                src="../../../assets/NPC/qp-xunhuan.png"
+                v-if="LYstatus == '录音中'"
+                src="../../../assets/NPC/qp-xunhuan-gray.png"
                 alt=""
                 style="width: 48px; height: 48px"
-                @click="circulationPlay"
-                v-else
               />
+              <template v-else>
+                <img
+                  src="../../../assets/NPC/qp-xunhuan.png"
+                  alt=""
+                  style="width: 48px; height: 48px"
+                  @click="circulationPlay"
+                  v-if="xunhunShow"
+                />
+                <img
+                  src="../../../assets/NPC/qp-no-xunhuan.png"
+                  alt=""
+                  style="width: 48px; height: 48px"
+                  @click="circulationPlay"
+                  v-else
+                />
+              </template>
               <img
-                v-if="LYstatus == '已结束'"
+                v-if="LYstatus != '已结束'"
                 src="../../../assets/NPC/qp-duibi.png"
                 alt=""
                 style="width: 48px; height: 48px"
               />
               <img
                 v-else
-                src="../../../assets/NPC/qp-duibi.png"
+                src="../../../assets/NPC/qp-duibi-sele.png"
                 alt=""
                 style="width: 48px; height: 48px"
+                @click="comparisonPlay"
               />
             </div>
           </div>
@@ -1087,6 +1115,7 @@ export default {
       regionData: null,
       LY_regionData: null,
       LY_url: "",
+      comparisonPlayStatus: false,
     };
   },
   computed: {
@@ -1153,29 +1182,55 @@ export default {
   },
   //方法集合
   methods: {
+    // 对比播放
+    comparisonPlay() {
+      this.comparisonPlayStatus = !this.comparisonPlayStatus;
+      this.stopAllPlayStart();
+      this.playMusic("play");
+    },
+    // 暂停并回到起点
+    stopAllPlayStart() {
+      this.wavesurfer_big.stop();
+      if (this.LYstatus == "已结束") {
+        wavesurfer_ly.stop();
+      }
+    },
     // 循环播放
     circulationPlay() {
       this.xunhunShow = !this.xunhunShow;
+      this.stopPlay();
+      this.playMusic("play");
     },
     // 选择速度
     speedListShowEvent() {
+      if (this.LYstatus == "录音中") {
+        return;
+      }
       this.speedListShow = true;
     },
     selespeed(index) {
+      this.stopPlay();
+      if (this.isPlaying) {
+        if (this.playList != ["ly"]) {
+          this.curTime = this.wavesurfer_big.getCurrentTime();
+        }
+      }
       this.speedListShow = false;
       this.speedIndex = index;
       this.wavesurfer_big = null;
-      this.initaudioImage(this.speedList[this.sentIndex]);
+      this.initaudioImage(this.speedList[index]);
       if (this.LYstatus == "已结束") {
         this.initLYaudioImage(this.speedList[this.sentIndex]);
       }
     },
     // 返回初始状态
     backStatus() {
+      this.regionData = null;
+      this.LY_regionData = null;
       this.initaudioImage(1);
-      this.initLYaudioImage(1);
       this.speedIndex = 3;
       if (this.LYstatus == "已结束") {
+        this.initLYaudioImage(1);
         wavesurfer_ly.zoom(Number(1500));
       }
     },
@@ -1307,11 +1362,9 @@ export default {
         FileID: this.curQue.mp3_list[0].file_id,
       }).then((res) => {
         const objectUrl = window.URL.createObjectURL(res);
-        console.log(this.wavesurfer_big);
         this.wavesurfer_big.load(objectUrl);
         let start = this.bg / 1000;
         let end = this.ed / 1000;
-
         that.wavesurfer_big.on("ready", function (e) {
           that.wavesurfer_big.enableDragSelection({
             color: "rgba(0, 180, 0, 0.3)",
@@ -1319,6 +1372,8 @@ export default {
           that.wavesurfer_big.clearRegions(); // 音频加载完成
           if (!audioRate) {
             that.wavesurfer_big.play(start, end);
+          } else {
+            that.wavesurfer_big.play(that.curTime / 1000, end);
           }
           that.wavesurfer_big.zoom(Number(1500));
           that.loading = false;
@@ -1341,13 +1396,29 @@ 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) {
+            if (time * 1000 == that.ed) {
+              if (that.comparisonPlayStatus) {
+                that.playList = ["ly"];
+                that.playMusic("play");
+              } else {
+                that.playMusic("play");
+              }
+            }
+          }
+        }
       });
-      that.wavesurfer_big.on("dblclick", function (e) {
-        console.log(e);
+      that.wavesurfer_big.on("interaction", function (e) {
+        that.isPlaying = false;
+        that.stopPlay();
       });
       that.wavesurfer_big.on("audioprocess", function (e) {
         that.curTime = e * 1000;
         let time = e.toFixed(2);
+        that.playList = ["yp"];
         let arr = time.split(".");
         let newtime = "";
         arr.forEach((item, i) => {
@@ -1363,6 +1434,26 @@ export default {
         that.ShowcurentTime = newtime;
       });
     },
+    curjuzi(src) {
+      let _this = this;
+      let start = this.bg / 1000;
+      let end = this.ed / 1000;
+      _this.wavesurfer_big.play(start, end);
+
+      let node = document.getElementById("waveform_big");
+      node.children[0].style.height = "130px";
+      let lynode = document.getElementById("ly_big");
+      lynode.style.display = "flex";
+      if (src) {
+        _this.LY_url = src;
+        this.initLYaudioImage(1);
+      } else {
+        let node = document.getElementById("waveform_big");
+        node.children[0].style.height = "308px";
+        let lynode = document.getElementById("ly_big");
+        lynode.style.display = "none";
+      }
+    },
     // 初始化录音声波图
     initLYaudioImage(audioRate) {
       if (audioRate) {
@@ -1425,6 +1516,7 @@ export default {
       });
       wavesurfer_ly.load(_this.LY_url);
       wavesurfer_ly.on("ready", function (e) {
+        _this.loading = false;
         wavesurfer_ly.zoom(Number(1500));
         wavesurfer_ly.enableDragSelection({
           color: "rgba(0, 180, 0, 0.3)",
@@ -1434,10 +1526,34 @@ export default {
       wavesurfer_ly.on("play", function (e) {
         _this.isPlaying = true;
       });
+      wavesurfer_ly.on("interaction", function (e) {
+        _this.isPlaying = false;
+        wavesurfer_ly.pause();
+      });
+
       wavesurfer_ly.on("pause", function (e) {
         _this.isPlaying = false;
         _this.playList = [];
       });
+      wavesurfer_ly.on("audioprocess", function (e) {
+        _this.playList = ["ly"];
+      });
+      wavesurfer_ly.on("finish", function (e) {
+        if (_this.comparisonPlayStatus) {
+          if (_this.xunhunShow) {
+            if (_this.LY_regionData) {
+              that.LY_regionData.loop = true;
+              that.LY_regionData.playLoop();
+            } else {
+              _this.playList = ["yp"];
+              _this.playMusic("play");
+            }
+          } else {
+            _this.comparisonPlayStatus = false;
+          }
+        }
+      });
+
       // 更新区域时。回调将接收该Region对象。
       wavesurfer_ly.on("region-updated", function (region) {
         // region.playLoop(); // 循环播放选中区域
@@ -1469,6 +1585,7 @@ export default {
       }
       return secondsStr;
     },
+
     // 播放录音
     playLY() {
       let node = document.getElementById("ly_audio");
@@ -1479,12 +1596,25 @@ export default {
         );
         node.play();
       }
-      wavesurfer_ly.play();
+      if (this.LY_regionData) {
+        if (this.xunhunShow) {
+          this.LY_regionData.playLoop(); // 循环播放选中区域
+        } else {
+          this.LY_regionData.loop = false;
+          this.LY_regionData.play();
+        }
+      } else {
+        wavesurfer_ly.play();
+      }
     },
     // 暂停播放
     stopPlay() {
       this.wavesurfer_big.pause();
+      if (this.LYstatus == "已结束") {
+        wavesurfer_ly.pause();
+      }
     },
+
     // 开始录音
     startLY() {
       this.stopPlay();
@@ -1506,7 +1636,7 @@ export default {
             position: 0,
             minHeight: 1,
             stripeEnable: false,
-            linear: [0, "#000", 1, "#000"],
+            linear: [0, "#5370BB", 1, "#5370BB"],
             // linear: [
             //   0,
             //   "rgba(0,0,0,1)",
@@ -1560,77 +1690,6 @@ export default {
           const objectUrl = window.URL.createObjectURL(blob);
           _this.LY_url = objectUrl;
           _this.initLYaudioImage();
-          // wavesurfer_ly = WaveSurfer.create({
-          //   container: _this.$refs.waveform_ly,
-          //   barMinHeight: 0.5,
-          //   barWidth: 1,
-          //   backgroundColor: "#141414",
-          //   progressColor: "#5370BB",
-          //   backend: "MediaElement",
-          //   waveColor: "#5370BB",
-          //   cursorColor: " #DE4444",
-          //   cursorWidth: 3,
-          //   barHeight: 2,
-          //   barGap: 0,
-          //   height: 130,
-          //   width: 400,
-          //   interact: true,
-          //   plugins: [
-          //     Timeline.create({
-          //       container: "#timeline_ly",
-          //       primaryColor: "#c0c0c0",
-          //       secondaryColor: "#c0c0c0",
-          //       primaryFontColor: "#c0c0c0",
-          //       secondaryFontColor: "#c0c0c0",
-          //       formatTimeCallback: _this.formatTimeCallback,
-          //       timeInterval: 0.025,
-          //       primaryLabelInterval: 4,
-          //       secondaryLabelInterval: 400,
-          //       notchPercentHeight: 40,
-          //     }),
-          //     CursorPlugin.create({
-          //       showTime: true,
-          //       opacity: 1,
-          //       color: "#1370F6",
-          //       customShowTimeStyle: {
-          //         "background-color": "#000",
-          //         color: "#fff",
-          //         "font-size": "10px",
-          //       },
-          //     }),
-          //     Regions.create({}),
-          //   ],
-          // });
-          // wavesurfer_ly.addRegion({
-          //   loop: false,
-          //   drag: false,
-          //   resize: false,
-          //   color: "rgba(254, 255, 255, 0.4)",
-          // });
-          // wavesurfer_ly.load(objectUrl);
-          // wavesurfer_ly.on("ready", function (e) {
-          //   wavesurfer_ly.zoom(Number(1500));
-          //   wavesurfer_ly.enableDragSelection({
-          //     color: "rgba(0, 180, 0, 0.3)",
-          //   });
-          //   wavesurfer_ly.clearRegions(); // 音频加载完成
-          // });
-          // wavesurfer_ly.on("play", function (e) {
-          //   _this.isPlaying = true;
-          // });
-          // wavesurfer_ly.on("pause", function (e) {
-          //   _this.isPlaying = false;
-          // });
-
-          // // 更新区域时。回调将接收该Region对象。
-          // wavesurfer_ly.on("region-updated", function (region) {
-          //   // region.playLoop(); // 循环播放选中区域
-          //   // region.play()
-          //   that.LY_regionData = region;
-          // });
-          // wavesurfer_ly.on("region-created", () => {
-          //   wavesurfer_ly.clearRegions();
-          // });
 
           if (_this.curQue.Bookanswer.practiceModel[_this.curSentIndex]) {
             _this.curQue.Bookanswer.practiceModel[_this.curSentIndex] = {
@@ -1774,61 +1833,7 @@ export default {
     showPrevNext(bool, key) {
       this[key] = bool;
     },
-    curjuzi(src) {
-      let _this = this;
-      let start = this.bg / 1000;
-      let end = this.ed / 1000;
-      _this.wavesurfer_big.play(start, end);
-      if (src) {
-        let node = document.getElementById("waveform_big");
-        node.children[0].style.height = "130px";
-        let lynode = document.getElementById("ly_big");
-        lynode.style.display = "flex";
-        // wavesurfer_ly = WaveSurfer.create({
-        //   container: _this.$refs.waveform_ly,
-        //   barWidth: 1,
-        //   progressColor: "#FF5C5C",
-        //   backend: "MediaElement",
-        //   waveColor: "#FF5C5C",
-        //   cursorColor: "#1370F6",
-        //   cursorWidth: 3,
-        //   barHeight: 0.8,
-        //   barGap: 6,
-        //   height: 130,
-        //   width: 400,
-        //   interact: false,
-        //   plugins: [
-        //     Timeline.create({
-        //       container: "#timeline_ly",
-        //       primaryColor: "#c0c0c0",
-        //       secondaryColor: "#c0c0c0",
-        //       primaryFontColor: "#c0c0c0",
-        //       secondaryFontColor: "#c0c0c0",
-        //       formatTimeCallback: _this.formatTimeCallback,
-        //       timeInterval: 0.025,
-        //       primaryLabelInterval: 4,
-        //       secondaryLabelInterval: 400,
-        //       notchPercentHeight: 40,
-        //     }),
-        //   ],
-        // });
-        wavesurfer_ly.load(src);
-        // wavesurfer_ly.on("ready", function (e) {
-        //   wavesurfer_ly.zoom(Number(600));
-        // });
-        wavesurfer_ly.on("play", function (e) {
-          _this.isPlaying = true;
-        });
-        wavesurfer_ly.on("pause", function (e) {
-          _this.isPlaying = false;
-        });
-      } else {
-        let node = document.getElementById("waveform_big");
-        node.children[0].style.height = "308px";
-        let lynode = document.getElementById("ly_big");
-        lynode.style.display = "none";
-      }
-    },
+
     prevSentence() {
       if (this.loading) {
         return;
@@ -2026,6 +2031,7 @@ export default {
     //播放音频
     playWord(item) {
       let _this = this;
+      _this.stopPlay();
       _this.pauseAudio();
       _this.isWordPlay = false;
       _this.wordIndex = item.wordIndex;
@@ -2128,35 +2134,16 @@ export default {
     getScreenHeight() {
       this.screenHeight = window.innerHeight;
     },
-    playMusic(type) {
+    playMusic(type, timeBool) {
       let YPindex = this.playList.indexOf("yp");
       let LYindex = this.playList.indexOf("ly");
       if (type == "play") {
-        if (YPindex != -1) {
-          if (this.regionData) {
-            if (this.xunhunShow) {
-              this.regionData.playLoop(); // 循环播放选中区域
-            } else {
-              this.regionData.loop = false;
-              this.regionData.play();
-            }
-          } else {
-            let time = this.wavesurfer_big.getCurrentTime();
-            let start = this.bg / 1000;
-            let end = this.ed / 1000;
-            if (time * 1000 == this.ed || time * 1000 == 0) {
-              this.wavesurfer_big.play(start, end);
-            } else {
-              this.wavesurfer_big.play(null, end);
-            }
-          }
-        }
         if (LYindex != -1) {
           this.playLY();
-        }
-        if (LYindex == -1 && YPindex == -1) {
+        } else {
           if (this.regionData) {
             if (this.xunhunShow) {
+              this.regionData.loop = true;
               this.regionData.playLoop(); // 循环播放选中区域
             } else {
               this.regionData.loop = false;
@@ -2166,7 +2153,9 @@ export default {
             let time = this.wavesurfer_big.getCurrentTime();
             let start = this.bg / 1000;
             let end = this.ed / 1000;
-            if (time * 1000 == this.ed || time * 1000 == 0) {
+            if (timeBool) {
+              this.wavesurfer_big.play(this.curTime, end);
+            } else if (time * 1000 == this.ed || time * 1000 == 0) {
               this.wavesurfer_big.play(start, end);
             } else {
               this.wavesurfer_big.play(null, end);
@@ -2174,13 +2163,9 @@ export default {
           }
         }
       } else {
-        if (YPindex != -1) {
-          this.wavesurfer_big.pause();
-        }
         if (LYindex != -1) {
           wavesurfer_ly.pause();
-        }
-        if (LYindex == -1 && YPindex == -1) {
+        } else {
           this.wavesurfer_big.pause();
         }
       }
@@ -2314,11 +2299,12 @@ export default {
   .play_erji {
     // margin-top: 16px;
     width: 64px;
-    height: 134px;
+    height: 130px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #4f92f6;
+    cursor: pointer;
     img {
       width: 28px;
       height: 28px;
@@ -2327,11 +2313,12 @@ export default {
   .erji {
     // margin-top: 16px;
     width: 64px;
-    height: 134px;
+    height: 130px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #ffffff;
+    cursor: pointer;
     img {
       width: 28px;
       height: 28px;
@@ -2339,7 +2326,7 @@ export default {
   }
 }
 #waveform_ly {
-  background: #f3f3f48e;
+  background: #141414;
 }
 #waveform_big {
   background: #f3f3f48e;
@@ -2361,6 +2348,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  .gray_speed {
+    opacity: 0.3;
+  }
   .speed {
     width: 48px;
     height: 48px;