录音时长

src/components/common/Soundrecorddiff.vue

@@ -1,27 +1,38 @@
 <!--  -->
 <template>
   <div class="NNPE-Book-record">
-    <div
-      :class="['record-main', microphoneStatus ? 'active' : '']"
-    >
-      <div class="record-main-inner" @click="microphone" v-if="!microphoneStatus">
+    <div :class="['record-main', microphoneStatus ? 'active' : '']">
+      <div
+        class="record-main-inner"
+        @click="microphone"
+        v-if="!microphoneStatus"
+      >
         <div class="record">
-            <svg-icon icon-class="Voice-luyin" :style="{color:'#fff',fontSize:'28px'}"></svg-icon>
+          <svg-icon
+            icon-class="Voice-luyin"
+            :style="{ color: '#fff', fontSize: '28px' }"
+          ></svg-icon>
         </div>
         <!-- <span v-if="microphoneStatus" class="record-time">{{
           handleDateTime(recordtime)
         }}</span> -->
       </div>
-      <img @click="microphone" class="luyin-gif" :style="{width:'56px'}" v-else src="../../assets/voice-gif.png" />
+      <img
+        @click="microphone"
+        class="luyin-gif"
+        :style="{ width: '56px' }"
+        v-else
+        src="../../assets/voice-gif.png"
+      />
     </div>
     <div
       v-if="
-        !microphoneStatus && recordList.length > 0 &&(selectIndex || selectIndex == 0) && hasMicro
+        !microphoneStatus &&
+        recordList.length > 0 &&
+        (selectIndex || selectIndex == 0) &&
+        hasMicro
       "
-      :class="[
-        'hasRecord',
-        bgIndex == 1 ? 'hasRecord-white' : '',
-      ]"
+      :class="['hasRecord', bgIndex == 1 ? 'hasRecord-white' : '']"
     >
       <div
         :class="[bgIndex == 1 ? 'playBack-white' : 'playBack', hasMicro]"
@@ -33,30 +44,39 @@
           )
         "
       >
-        <svg-icon icon-class="pause" className="icon-svg" v-if="hasMicro==='active'"></svg-icon>
-        <svg-icon icon-class="play-fill" className="icon-svg" v-else-if="hasMicro==='normal'"></svg-icon>
+        <svg-icon
+          icon-class="pause"
+          className="icon-svg"
+          v-if="hasMicro === 'active'"
+        ></svg-icon>
+        <svg-icon
+          icon-class="play-fill"
+          className="icon-svg"
+          v-else-if="hasMicro === 'normal'"
+        ></svg-icon>
       </div>
       <!-- <span
         class="record-time"
         >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
       > -->
     </div>
-    <el-select 
-        v-model="selectIndex"
-        placeholder="请选择"
-        no-data-text="No recording"
-        :popper-append-to-body="false"
-        @change="handleChangeRecord"
-        class="diff-select"
-        :class="[bgIndex == 1 ? 'diff-select-white' : '']"
-        v-if="recordList.length > 0"
+    <el-select
+      v-model="selectIndex"
+      placeholder="请选择"
+      no-data-text="No recording"
+      :popper-append-to-body="false"
+      @change="handleChangeRecord"
+      class="diff-select"
+      :class="[bgIndex == 1 ? 'diff-select-white' : '']"
+      v-if="recordList.length > 0"
     >
-        <el-option
-            v-for="(item, index) in recordList"
-            :key="'recordList' + index"
-            :label="'录音'+(index+1)"
-            :value="index">
-        </el-option>
+      <el-option
+        v-for="(item, index) in recordList"
+        :key="'recordList' + index"
+        :label="'录音' + (index + 1)"
+        :value="index"
+      >
+      </el-option>
     </el-select>
   </div>
 </template>
@@ -101,9 +121,8 @@ export default {
       handler(val, oldVal) {
         let _this = this;
         _this.recordList = _this.answerRecordList
-        ? JSON.parse(JSON.stringify(_this.answerRecordList))
-        : [];
-        
+          ? JSON.parse(JSON.stringify(_this.answerRecordList))
+          : [];
       },
       // 深度观察监听
       deep: true,
@@ -131,12 +150,12 @@ export default {
       _this.recordFile = _this.recordList.length + 1;
       _this.handleChangeRecord(0);
       _this.$emit(
-          "getRerordStatus",
-          !_this.microphoneStatus && _this.recordList.length > 0
-        );
+        "getRerordStatus",
+        !_this.microphoneStatus && _this.recordList.length > 0
+      );
       _this.$forceUpdate();
-    }else{
-        _this.selectIndex = null
+    } else {
+      _this.selectIndex = null;
     }
     _this.audio.addEventListener("play", function () {
       _this.changeStatus("active");
@@ -203,12 +222,16 @@ export default {
         reader.readAsDataURL(wav);
         reader.onloadend = () => {
           _this.recordList[_this.selectIndex].wavData = reader.result;
-          _this.recordList[_this.selectIndex].toltime = Math.floor(toltime);
+          _this.recordList[_this.selectIndex].toltime = Math.ceil(toltime);
           _this.recordList[_this.selectIndex].fileSize = fileSize;
 
           _this.wavblob = _this.recordList[_this.selectIndex].wavData;
-          _this.$emit("getWavblob", _this.wavblob,reader.result);
-
+          _this.$emit(
+            "getWavblob",
+            _this.wavblob,
+            reader.result,
+            Math.ceil(toltime)
+          );
         };
       }
       _this.$emit(
@@ -290,25 +313,25 @@ export default {
       return time;
     },
     async handleChangeRecord(index) {
-    //   this.recordtime = this.recordList[index].toltime;
-      this.recordtime = 5
+      //   this.recordtime = this.recordList[index].toltime;
+
       let MethodName = "/PaperServer/Client/UserSentRec/FindById";
       let data = {
         id: this.recordList[index].id,
-        got_rec_data_flag: true
-      }
-      await getLogin(MethodName, data)
-      .then((res) => {
-        if(res.status===1){
-            this.wavblob = res.data.rec_sound_data;
-            this.recordList[index].wavData = res.data.rec_sound_data
+        got_rec_data_flag: true,
+      };
+      await getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.wavblob = res.data.rec_sound_data;
+          this.recordList[index].wavData = res.data.rec_sound_data;
+          this.recordtime = res.data.toltime;
         }
-      })
+      });
       this.hasMicro = "normal";
       clearInterval(this.timer);
       this.audio.pause();
       this.oldIndex = null;
-      this.$emit("getWavblob", this.wavblob);
+      this.$emit("getWavblob", this.wavblob, this.recordtime);
       if (this.recordList[index].selectData) {
         this.$emit("getSelectData", this.recordList[index].selectData);
       }
@@ -360,7 +383,7 @@ export default {
     font-size: 24px;
     line-height: 24px;
     // margin-left: 8px;
-    color: #175DFF;
+    color: #175dff;
     // background: url("../../../assets/icon/play-24-normal-Black.png") center
     //   no-repeat;
     // background-size: 100%;
@@ -380,7 +403,7 @@ export default {
     font-size: 24px;
     // margin-left: 8px;
     line-height: 24px;
-    color: #FFD617;
+    color: #ffd617;
     cursor: pointer;
     // &.normal {
     //   background: url("../../../assets/icon/play-24-normal-white.png") center
@@ -417,7 +440,7 @@ export default {
     box-sizing: border-box;
     padding: 40px 16px 40px 40px;
     &.active {
-    //   background: url("../../../assets/NPC/vocie-gif.png") no-repeat left top;
+      //   background: url("../../../assets/NPC/vocie-gif.png") no-repeat left top;
       background-size: 100% 100%;
     }
     &-inner {
@@ -476,7 +499,7 @@ export default {
       width: 24px;
       height: 24px;
       margin-left: 16px;
-    //   background: url("../../../assets/NPC/del-24.png") center no-repeat;
+      //   background: url("../../../assets/NPC/del-24.png") center no-repeat;
       background-size: 100%;
       display: block;
       &-disabled {
@@ -560,19 +583,19 @@ export default {
     }
   }
 }
-.diff-select{
-    margin-left: 16px;
-    width: 116px;
-    .el-input__inner{
-        padding: 8px 16px;
-    }
-    &-white{
-        .el-input__inner{
-            background: rgba(0, 0, 0, 0.24);
-            border-color: rgba(0, 0, 0, 0.24);
-            color: #fff;
-            font-weight: 500;
-        }
+.diff-select {
+  margin-left: 16px;
+  width: 116px;
+  .el-input__inner {
+    padding: 8px 16px;
+  }
+  &-white {
+    .el-input__inner {
+      background: rgba(0, 0, 0, 0.24);
+      border-color: rgba(0, 0, 0, 0.24);
+      color: #fff;
+      font-weight: 500;
     }
+  }
 }
 </style>

src/views/bookShelf/components/PracticeModel.vue

@@ -825,7 +825,7 @@ export default {
         this.hasMicro = "normal";
         this.recorder.stop();
         clearInterval(_this.timer);
-        let toltime = this.recorder.duration; // 录音总时长
+        let toltime = Math.ceil(this.recorder.duration); // 录音总时长
         let fileSize = this.recorder.fileSize; // 录音总大小
         // 录音结束，获取取录音数据
         let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
@@ -851,7 +851,7 @@ export default {
               this.recordList[this.selectIndex].selectData
             );
           }
-          this.addRecord(reader.result);
+          this.addRecord(reader.result, toltime);
         };
       }
       _this.$emit(
@@ -955,7 +955,7 @@ export default {
       this.historyFlag = false;
     },
     // 保存录音
-    addRecord(wav) {
+    addRecord(wav, toltime) {
       if (this.playSentIndex === -1) {
         return;
       }
@@ -964,6 +964,7 @@ export default {
         sent_id:
           this.articleInfo.art_corpus_data.sentList[this.playSentIndex].id,
         rec_sound_data: wav,
+        toltime: toltime,
       };
       getLogin(MethodName, data).then((res) => {
         if (this.repeatAfter) {

src/views/bookShelf/components/Voicefullscreen.vue

@@ -622,17 +622,18 @@ export default {
     getMicrophoneStatus(bool) {
       this.isRecording = bool;
     },
-    getWavblob(wavblob, wav) {
+    getWavblob(wavblob, wav, toltime) {
       this.wavblob = wav;
       if (wav) {
-        this.addRecord(wav);
+        this.addRecord(wav, toltime);
       }
     },
-    addRecord(wav) {
+    addRecord(wav, toltime) {
       let MethodName = "/PaperServer/Client/UserSentRec/AddUserSentRec";
       let data = {
         sent_id: this.curQue.art_corpus_data.sentList[this.curSentIndex].id,
         rec_sound_data: wav,
+        toltime: toltime,
       };
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {