Bläddra i källkod

录音增加上一个下一个按钮,及对比bug,

qinpeng 2 år sedan
förälder
incheckning
271066a507

BIN
src/assets/NPC/qp-last.png


BIN
src/assets/NPC/qp-next.png


+ 57 - 27
src/components/Adult/preview/Voicefullscreen.vue

@@ -792,6 +792,20 @@
             ]"
           >
             {{ curSentIndex + 1 }}/{{ sentList.length }}
+            <div v-if="patternType == '录音模式'">
+              <img
+                src="../../../assets/NPC/qp-last.png"
+                alt=""
+                style="width: 48px; height: 48px"
+                @click="prevSentence"
+              />
+              <img
+                src="../../../assets/NPC/qp-next.png"
+                alt=""
+                style="width: 48px; height: 48px; margin-left: 13px"
+                @click="nextSentence"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -1187,11 +1201,15 @@ export default {
     comparisonPlay() {
       this.stopAllPlayStart();
       this.comparisonPlayStatus = true;
+      this.curTime = 0;
+      this.playList = [];
       this.playMusic("play");
     },
     // 暂停并回到起点
     stopAllPlayStart() {
-      this.wavesurfer_big.stop();
+      if (this.wavesurfer_big) {
+        this.wavesurfer_big.stop();
+      }
       if (this.LYstatus == "已结束") {
         wavesurfer_ly.stop();
       }
@@ -1209,7 +1227,7 @@ export default {
       if (this.LYstatus == "录音中") {
         return;
       }
-      this.speedListShow = true;
+      this.speedListShow = !this.speedListShow;
     },
     selespeed(index) {
       let ly_Playing = false;
@@ -1248,7 +1266,6 @@ export default {
     },
     // 切换录音模式
     cutPatternType(type) {
-      this.loading = true;
       let _this = this;
       _this.$nextTick(() => {
         if (_this.$refs.audioLineSent) {
@@ -1257,7 +1274,17 @@ export default {
       });
       this.patternType = type;
       if (type == "录音模式") {
-        this.initaudioImage();
+        this.initaudioImage(null, false);
+        if (this.curQue.Bookanswer.practiceModel[this.curSentIndex]) {
+          this.curjuzi(
+            this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordSrc,
+            false
+          );
+          this.LYstatus = "已结束";
+        } else {
+          this.curjuzi(null, false);
+          this.LYstatus = "未开始";
+        }
       }
     },
     selepaly(type) {
@@ -1312,14 +1339,13 @@ export default {
     },
     // 初始化声波
     initaudioImage(audioRate, isPlaying) {
-      if (audioRate) {
-        this.loading = true;
-        let node = document.getElementById("waveform_big");
-        var pObjs = node.childNodes;
-        for (var i = pObjs.length - 1; i >= 0; i--) {
-          // 一定要倒序,正序是删不干净的,可自行尝试
-          node.removeChild(pObjs[i]);
-        }
+      this.loading = true;
+
+      let node = document.getElementById("waveform_big");
+      var pObjs = node.childNodes;
+      for (var i = pObjs.length - 1; i >= 0; i--) {
+        // 一定要倒序,正序是删不干净的,可自行尝试
+        node.removeChild(pObjs[i]);
       }
       let plugin = [
         Timeline.create({
@@ -1347,7 +1373,6 @@ export default {
         Regions.create({}),
       ];
       if (this.regionData) {
-        console.log(this.regionData);
         plugin.splice(plugin.length - 1, 1);
         plugin.push(
           Regions.create({
@@ -1406,7 +1431,6 @@ export default {
             });
             that.wavesurfer_big.clearRegions(); // 音频加载完成
           }
-
           if (!audioRate) {
             that.wavesurfer_big.play(start, end);
           } else {
@@ -1500,11 +1524,13 @@ export default {
         that.ShowcurentTime = newtime;
       });
     },
-    curjuzi(src) {
+    curjuzi(src, playBool) {
       let _this = this;
       let start = this.bg / 1000;
       let end = this.ed / 1000;
-      _this.wavesurfer_big.play(start, end);
+      if (playBool) {
+        _this.wavesurfer_big.play(start, end);
+      }
 
       let node = document.getElementById("waveform_big");
       node.children[0].style.height = "130px";
@@ -1522,14 +1548,12 @@ export default {
     },
     // 初始化录音声波图
     initLYaudioImage(audioRate) {
-      if (audioRate) {
-        this.loading = true;
-        let node = document.getElementById("waveform_ly");
-        var pObjs = node.childNodes;
-        for (var i = pObjs.length - 1; i >= 0; i--) {
-          // 一定要倒序,正序是删不干净的,可自行尝试
-          node.removeChild(pObjs[i]);
-        }
+      this.loading = true;
+      let node = document.getElementById("waveform_ly");
+      var pObjs = node.childNodes;
+      for (var i = pObjs.length - 1; i >= 0; i--) {
+        // 一定要倒序,正序是删不干净的,可自行尝试
+        node.removeChild(pObjs[i]);
       }
       let _this = this;
       let plugin = [
@@ -1603,7 +1627,6 @@ export default {
 
       wavesurfer_ly.load(_this.LY_url);
       wavesurfer_ly.on("ready", function (e) {
-        _this.loading = false;
         wavesurfer_ly.zoom(Number(1500));
         if (!_this.LY_regionData) {
           wavesurfer_ly.enableDragSelection({
@@ -1611,6 +1634,7 @@ export default {
           });
           wavesurfer_ly.clearRegions(); // 音频加载完成
         }
+        _this.loading = false;
       });
       wavesurfer_ly.on("play", function (e) {
         _this.isPlaying = true;
@@ -1626,7 +1650,6 @@ export default {
         let time = wavesurfer_ly.getCurrentTime();
         if (_this.xunhunShow) {
           if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
-            console.log(_this.comparisonPlayStatus);
             if (_this.comparisonPlayStatus) {
               _this.playList = [];
               _this.playMusic("play");
@@ -1949,7 +1972,6 @@ export default {
       }
     },
     nextSentence() {
-      console.log(this.loading);
       if (this.loading) {
         return;
       }
@@ -3099,6 +3121,14 @@ export default {
       border-radius: 8px;
       background: #fff;
       text-align: center;
+      display: flex;
+      align-items: center;
+      > div {
+        margin-left: 22px;
+        img {
+          cursor: pointer;
+        }
+      }
       &-green {
         color: #ffffff;
         background: rgba(255, 255, 255, 0.2);