音频对照

src/components/Adult/preview/AudioCompare.vue

@@ -0,0 +1,99 @@
+<!--  -->
+<template>
+  <div class="compara-content">
+    <template v-if="wavblob">
+      <div style="width: 16px; height: 16px; margin-left: 8px" v-if="!isR">
+        <AudioLine
+          :mp3="url"
+          :getCurTime="getCurTime"
+          :ref="'audioLine' + index"
+          :audioId="'artPraAudioId' + index"
+          :stopAudio="stopAudio"
+          :width="555"
+          :hideSlider="true"
+          :bg="bg"
+          :ed="ed"
+          @handleChangeStopAudio="handleChangeStopAudio"
+          @sentPause="sentPause"
+        />
+      </div>
+      <div style="width: 16px; height: 16px; margin-left: 8px" v-else>
+        <audio-red
+          v-if="sentIndex == index"
+          :mp3="wavblob"
+          :isCompare="true"
+          :themeColor="themeColor"
+          @sentPause="sentPause"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <img
+        src="../../../assets/NPC/compare-disable.png"
+        class="compare-disable"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import AudioLine from "./AudioLine.vue";
+import AudioRed from "./components/AudioRed.vue";
+export default {
+  components: {
+    AudioLine,
+    AudioRed,
+  },
+  props: [
+    "isRecord",
+    "wavblob",
+    "url",
+    "bg",
+    "ed",
+    "index",
+    "sentIndex",
+    "getCurTime",
+    "sentPause",
+    "stopAudio",
+    "handleChangeStopAudio",
+  ],
+  data() {
+    return {
+      isR: false,
+    };
+  },
+  computed: {},
+  watch: {
+    isRecord: {
+      handler(newVal, oldVal) {
+        if (this.sentIndex == this.index) {
+          this.isR = newVal;
+        }
+      },
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.compare-disable {
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-left: 8px;
+}
+</style>

src/components/Adult/preview/AudioLine.vue

@@ -137,6 +137,9 @@ export default {
     });
     _this.$refs[audioId].addEventListener("pause", function () {
       _this.audio.playing = false;
+      if (_this.hideSlider && _this.audio.currentTime * 1000 + 500 > _this.ed) {
+        _this.$emit("sentPause", true);
+      }
     });
     _this.$refs[audioId].addEventListener("ended", function () {
       _this.audio.playing = false;
@@ -173,8 +176,8 @@ export default {
         }
       });
       let video = document.getElementsByTagName("video");
-      video.forEach((item) => {
-        item.pause();
+      video.forEach((vItem) => {
+        vItem.pause();
       });
 
       if (this.audio.playing) {
@@ -336,12 +339,13 @@ export default {
       height: 16px;
       cursor: pointer;
       &.playBtn-icon {
-        background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
-          left top;
+        background: url("../../../assets/icon/pauseC-16-normal-red.png")
+          no-repeat left top;
         background-size: 100% 100%;
       }
       &.pauseBtn-icon {
-        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
+        background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
+          left top;
         background-size: 100% 100%;
       }
     }
@@ -406,13 +410,13 @@ export default {
     .audioLine2 {
       .play-icon {
         &.playBtn-icon {
-          background: url("../../../assets/NPC/icon-voice-play-green.png")
+          background: url("../../../assets/icon/pauseC-16-normal-Green.png")
             no-repeat left top;
           background-size: 100% 100%;
         }
         &.pauseBtn-icon {
-          background: url("../../../assets/NPC/play-green.png") no-repeat left
-            top;
+          background: url("../../../assets/NPC/compare-pause-green.png")
+            no-repeat left top;
           background-size: 100% 100%;
         }
       }
@@ -435,13 +439,13 @@ export default {
     .audioLine2 {
       .play-icon {
         &.playBtn-icon {
-          background: url("../../../assets/NPC/icon-voice-play-brown.png")
+          background: url("../../../assets/icon/pauseC-16-normal-Brown.png")
             no-repeat left top;
           background-size: 100% 100%;
         }
         &.pauseBtn-icon {
-          background: url("../../../assets/NPC/play-brown.png") no-repeat left
-            top;
+          background: url("../../../assets/NPC/compare-pause-brown.png")
+            no-repeat left top;
           background-size: 100% 100%;
         }
       }

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -320,14 +320,17 @@
             </div>
           </div>
           <div v-show="sentIndex == index" class="Soundrecord-content">
-            <Soundrecord
-              @handleWav="handleWav"
-              type="promax"
-              class="luyin-box"
-              @handleParentPlay="handleParentPlay"
-            />
-            <div>
-              <AudioLine
+            <div class="Soundrecord-content-inner">
+              <Soundrecord
+                @handleWav="handleWav"
+                type="promax"
+                class="luyin-box"
+                @getWavblob="getWavblob"
+                @handleParentPlay="handleParentPlay"
+                @sentPause="sentPause"
+              />
+              <div class="compare-box">
+                <!-- <AudioLine
                 :mp3="curQue.mp3_list[0].url"
                 :getCurTime="getCurTime"
                 :ref="'audioLine' + index"
@@ -338,7 +341,21 @@
                 :bg="curQue.wordTime[index].bg"
                 :ed="curQue.wordTime[index].ed"
                 @handleChangeStopAudio="handleChangeStopAudio"
-              />
+              /> -->
+                <Audio-compare
+                  :themeColor="themeColor"
+                  :index="index"
+                  :sentIndex="sentIndex"
+                  :url="curQue.mp3_list[0].id"
+                  :bg="curQue.wordTime[index].bg"
+                  :ed="curQue.wordTime[index].ed"
+                  :wavblob="wavblob"
+                  :getCurTime="getCurTime"
+                  :sentPause="sentPause"
+                  :isRecord="isRecord"
+                  :handleChangeStopAudio="handleChangeStopAudio"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -352,13 +369,15 @@ import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
 import RoleChs from "./RoleChs.vue";
+import AudioCompare from "../AudioCompare.vue";
 export default {
   name: "ArticleView",
-  props: ["curQue", "colorBox", "noFont"],
+  props: ["curQue", "colorBox", "noFont", "themeColor"],
   components: {
     AudioLine,
     Soundrecord,
     RoleChs,
+    AudioCompare,
   },
   filters: {
     handlePinyin(wordsList) {
@@ -386,6 +405,7 @@ export default {
   },
   data() {
     return {
+      wavblob: null,
       resObj: null,
       curTime: 0, //单位s
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
@@ -417,6 +437,7 @@ export default {
       isShowPY: true,
       isRepeat: false,
       currSent: null, //当前句子的时间
+      isRecord: false,
     };
   },
   computed: {
@@ -428,9 +449,24 @@ export default {
       return playing;
     },
   },
-  watch: {},
+  watch: {
+    sentIndex: {
+      handler: function (newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.wavblob = "";
+        }
+      },
+      deep: true,
+    },
+  },
   //方法集合
   methods: {
+    getWavblob(wavblob) {
+      this.wavblob = wavblob;
+    },
+    sentPause(isRecord) {
+      this.isRecord = isRecord;
+    },
     getCurTime(curTime) {
       let _this = this;
       if (_this.isRepeat) {
@@ -813,17 +849,26 @@ export default {
     }
   }
   .Soundrecord-content {
-    padding: 0px 0px 8px 60px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    .luyin-box {
-      width: 280px;
-      padding: 8px 12px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0px 0px 8px 68px;
+
+    &-inner {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 304px;
       border-radius: 8px;
       background: #ffffff;
-      margin-right: 16px;
+      padding: 4px 12px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      .luyin-box {
+        width: 280px;
+      }
+      .compare-box {
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
 }

src/components/Adult/preview/Soundrecord.vue

@@ -11,7 +11,7 @@
           'record-time',
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
-          type && type == 'normal'?'record-time-flex':''
+          type && type == 'normal' ? 'record-time-flex' : '',
         ]"
         v-if="type && type == 'normal'"
         >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
@@ -140,6 +140,7 @@ export default {
     microphone() {
       let _this = this;
       if (!this.microphoneStatus) {
+        _this.$emit("getWavblob", null);
         //开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -151,7 +152,9 @@ export default {
         }, 1000);
         this.$emit("handleParentPlay");
         let obj = {
-          name: _this.fileName ? _this.fileName + _this.recordFile : "新录音" + _this.recordFile,
+          name: _this.fileName
+            ? _this.fileName + _this.recordFile
+            : "新录音" + _this.recordFile,
           id: _this.recordFile + Math.round(Math.random() * 10),
         };
         _this.recordList.push(obj);
@@ -187,6 +190,7 @@ export default {
           //     (_this.type && _this.type == "mini")
           //   ) {
           _this.wavblob = _this.recordList[_this.selectIndex].wavData;
+          _this.$emit("getWavblob", _this.wavblob);
           //   }
         };
       }
@@ -268,17 +272,25 @@ export default {
       clearInterval(this.timer);
       this.audio.pause();
       this.oldIndex = null;
+      this.$emit("getWavblob", this.wavblob);
+      this.$emit("sentPause", false);
     },
     handleDelete() {
       if (this.selectIndex || this.selectIndex == 0) {
         this.recordList.splice(this.selectIndex, 1);
         this.selectIndex =
-        this.recordList.length > 0 ? this.recordList.length - 1 : null;
-        this.hasMicro = this.recordList.length > 0 ? "normal" :"";
-        this.recordtime = this.recordList.length > 0 ? this.recordList[this.selectIndex].toltime :0;
-        this.audio.pause()
-        this.audio = new window.Audio()
-        this.wavblob = this.recordList.length > 0 ? this.recordList[this.selectIndex].wavData : null;
+          this.recordList.length > 0 ? this.recordList.length - 1 : null;
+        this.hasMicro = this.recordList.length > 0 ? "normal" : "";
+        this.recordtime =
+          this.recordList.length > 0
+            ? this.recordList[this.selectIndex].toltime
+            : 0;
+        this.audio.pause();
+        this.audio = new window.Audio();
+        this.wavblob =
+          this.recordList.length > 0
+            ? this.recordList[this.selectIndex].wavData
+            : null;
         this.oldIndex = null;
         this.isPlaying = false;
         clearInterval(this.timer);
@@ -378,15 +390,15 @@ export default {
     font-size: 16px;
     line-height: 150%;
     margin-left: 8px;
-    font-family: 'robot';
+    font-family: "robot";
     &.record-black {
       color: #000000;
     }
     &.record-ing {
       color: #de4444;
     }
-    &.record-time-flex{
-        flex: 1;
+    &.record-time-flex {
+      flex: 1;
     }
   }
   .el-select {

src/components/Adult/preview/components/AudioRed.vue

@@ -8,7 +8,7 @@
 <script>
 export default {
   components: {},
-  props: ["seconds", "mp3", "wav", "themeColor"],
+  props: ["seconds", "mp3", "wav", "themeColor", "isCompare"],
   data() {
     return {
       audio: new Audio(),
@@ -29,20 +29,50 @@ export default {
         : require("../../../../assets/NPC/icon-voice-play-red.png"),
     };
   },
-  computed: {},
+  computed: {
+    comparePauseSrc() {
+      switch (this.themeColor) {
+        case "green":
+          return require("../../../../assets/NPC/compare-pause-green.png");
+        case "brown":
+          return require("../../../../assets/NPC/compare-pause-brown.png");
+        case "red":
+          return require("../../../../assets/NPC/compare-pause-red.png");
+        default:
+          return require("../../../../assets/NPC/compare-pause-red.png");
+      }
+    },
+    comparePlaySrc() {
+      switch (this.themeColor) {
+        case "green":
+          return require("../../../../assets/icon/pauseC-16-normal-Green.png");
+        case "brown":
+          return require("../../../../assets/icon/pauseC-16-normal-Brown.png");
+        case "red":
+          return require("../../../../assets/icon/pauseC-16-normal-red.png");
+        default:
+          return require("../../../../assets/icon/pauseC-16-normal-red.png");
+      }
+    },
+  },
   watch: {},
   //方法集合
   methods: {
     handlePlayVoice() {
-      if (!this.audio.paused) {
-        this.audio.pause();
-      } else {
-        let _this = this;
+      let _this = this;
+      if (!_this.audio.paused) {
         _this.audio.pause();
-        _this.audio.load();
-        _this.audio.src = _this.mp3;
-        _this.audio.loop = false;
-        _this.audio.play();
+      } else {
+        if (_this.isCompare) {
+          _this.audio.pause();
+          _this.audio.play();
+        } else {
+          _this.audio.pause();
+          _this.audio.load();
+          _this.audio.src = _this.mp3;
+          _this.audio.loop = false;
+          _this.audio.play();
+        }
       }
     },
     stopAudio() {
@@ -63,17 +93,31 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    _this.voiceSrc = _this.voicePauseSrc;
+    _this.voiceSrc = _this.isCompare
+      ? _this.comparePlaySrc
+      : _this.voicePauseSrc;
+    if (_this.isCompare) {
+      _this.audio.pause();
+      _this.audio.load();
+      _this.audio.src = _this.mp3;
+      _this.audio.loop = false;
+      _this.audio.play();
+    }
     _this.audio.addEventListener("play", function () {
-      console.log("播放");
-      _this.voiceSrc = _this.voicePlaySrc;
+      _this.voiceSrc = _this.isCompare
+        ? _this.comparePlaySrc
+        : _this.voicePauseSrc;
     });
     _this.audio.addEventListener("pause", function () {
-      _this.voiceSrc = _this.voicePauseSrc;
+      _this.voiceSrc = _this.isCompare
+        ? _this.comparePauseSrc
+        : _this.voicePauseSrc;
     });
     _this.audio.addEventListener("ended", function () {
-      console.log("停止");
-      _this.voiceSrc = _this.voicePauseSrc;
+      _this.voiceSrc = _this.isCompare
+        ? _this.comparePauseSrc
+        : _this.voicePauseSrc;
+      _this.$emit("sentPause", false);
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前