保存录音内容

src/views/exercise_questions/create/components/common/SoundRecord.vue

@@ -127,7 +127,6 @@ export default {
         this.hasMicro = 'normal';
         this.recorder.stop();
         clearInterval(this.timer);
-        let tolTime = this.recorder.duration; // 录音总时长
         // 录音结束，获取取录音数据
         let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
         this.microphoneStatus = false;

src/views/exercise_questions/preview/RepeatPreview.vue

@@ -7,19 +7,12 @@
     </div>
     <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
     <div class="option-list">
-      <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item']">
+      <li v-for="(item, i) in answer_list" :key="i" :class="['option-item']">
         <span>{{ computeOptionMethods[data.option_number_show_mode](i) }}. </span>
-        <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
-        <div class="option-content" v-html="sanitizeHTML(item.content)"></div>
+        <AudioPlay v-if="data.option_list[i].audio_file_id" :file-id="data.option_list[i].audio_file_id" />
+        <div class="option-content" v-html="sanitizeHTML(data.option_list[i].content)"></div>
         <div class="sound-box">
-          <SoundRecordPreview
-            :wav-blob="answer_list[i].audio_file_id"
-            :record-time="answer_list[i].audio_wav_time"
-            :item-index="i"
-            :type="'small'"
-            @deleteWav="deleteWav"
-            @updateWav="updateWav"
-          />
+          <SoundRecordPreview :wav-blob.sync="item.audio_file_id" :type="'small'" />
         </div>
       </li>
     </div>
@@ -54,21 +47,10 @@ export default {
         let obj = {
           mark: item.mark,
           audio_file_id: '',
-          audio_wav_time: 0,
         };
         this.answer_list.push(obj);
       });
     },
-    // 清除录音
-    deleteWav(index) {
-      this.answer_list[index].audio_file_id = '';
-      this.answer_list[index].audio_wav_time = 0;
-    },
-    // 更新录音内容和时间
-    updateWav(wav, time, index) {
-      this.answer_list[index].audio_file_id = wav;
-      this.answer_list[index].audio_wav_time = time;
-    },
   },
 };
 </script>

src/views/exercise_questions/preview/WritePreview.vue

@@ -17,12 +17,7 @@
     />
     <template v-if="isEnable(data.property.is_enable_voice_answer)">
       <!-- 语音作答 -->
-      <SoundRecordPreview
-        :wav-blob="user_answer.voice_file_id"
-        :record-time="user_answer.audio_wav_time"
-        @deleteWav="deleteWav"
-        @updateWav="updateWav"
-      />
+      <SoundRecordPreview :wav-blob.sync="user_answer.voice_file_id" />
     </template>
     <template v-if="isEnable(data.property.is_enable_upload_accessory)">
       <!-- 上传附件 -->
@@ -67,23 +62,12 @@ export default {
       user_answer: {
         text: '', // 用户文章
         voice_file_id: '', // 录音内容
-        audio_wav_time: 0, // 录音时间
         accessory_file_id: [], // 上传文件列表
       },
     };
   },
   created() {},
   methods: {
-    // 清除录音
-    deleteWav() {
-      this.user_answer.voice_file_id = '';
-      this.user_answer.audio_wav_time = 0;
-    },
-    // 更新录音内容和时间
-    updateWav(wav, time) {
-      this.user_answer.voice_file_id = wav;
-      this.user_answer.audio_wav_time = time;
-    },
     // 文件上传成功
     handleUpload(fileId) {
       this.user_answer.accessory_file_id.push(fileId);

src/views/exercise_questions/preview/components/common/SoundRecordPreview.vue

@@ -12,12 +12,12 @@
       </span>
 
       <label v-if="type === 'big'" :class="['record-time', microphoneStatus ? 'record-ing' : '']">
-        {{ secondFormatConversion(recordTimes) }}
+        {{ audio.paused ? '' : '-' }}{{ secondFormatConversion(recordTimes) }}
       </label>
     </div>
     <div v-if="type === 'small'" class="sound-item">
       <label :class="['record-time', microphoneStatus ? 'record-ing' : '']">
-        {{ secondFormatConversion(recordTimes) }}
+        {{ audio.paused ? '' : '-' }}{{ secondFormatConversion(recordTimes) }}
       </label>
     </div>
     <div class="sound-item">
@@ -32,13 +32,14 @@
       </span>
       <label v-if="type === 'big'" class="tips">删除</label>
     </div>
-    <audio ref="audio" :src="wavBlob" preload="metadata"></audio>
+    <audio ref="audio" :src="file_url" preload="metadata"></audio>
   </div>
 </template>
 
 <script>
 import Recorder from 'js-audio-recorder'; // 录音插件
 
+import { GetStaticResources, GetFileStoreInfo } from '@/api/app';
 import { secondFormatConversion } from '@/utils/transform';
 
 export default {
@@ -48,10 +49,6 @@ export default {
       type: String,
       default: '',
     },
-    recordTime: {
-      type: Number,
-      default: 0,
-    },
     itemIndex: {
       type: Number,
       default: null,
@@ -76,7 +73,9 @@ export default {
         paused: true,
       },
       playtime: 0, // 播放时间
-      recordTimes: JSON.parse(JSON.stringify(this.recordTime)),
+      recordTimes: 0,
+      file_url: '',
+      recordTime: 0,
     };
   },
   computed: {
@@ -87,6 +86,19 @@ export default {
       return this.type === 'big' ? 24 : 16;
     },
   },
+  watch: {
+    wavBlob: {
+      handler(val) {
+        if (!val) return;
+        GetFileStoreInfo({ file_id: val }).then(({ file_url, media_duration }) => {
+          this.file_url = file_url;
+          this.recordTime = media_duration;
+          this.recordTimes = JSON.parse(JSON.parse(media_duration));
+        });
+      },
+      immediate: true,
+    },
+  },
   mounted() {
     this.$refs.audio.addEventListener('ended', () => {
       this.audio.paused = true;
@@ -139,20 +151,26 @@ export default {
         this.hasMicro = 'normal';
         this.recorder.stop();
         clearInterval(this.timer);
-        let tolTime = this.recorder.duration; // 录音总时长
         // 录音结束，获取取录音数据
         let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
         this.microphoneStatus = false;
         let reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = () => {
-          this.$emit('updateWav', reader.result, Math.floor(tolTime), this.itemIndex);
-          this.updateData(reader.result, Math.floor(tolTime));
+          let MethodName = 'file_store_manager-SaveFileByteBase64Text';
+          let data = {
+            base64_text: reader.result.replace('data:audio/wav;base64,', ''),
+            file_suffix_name: 'mp3',
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            if (res.status === 1) {
+              this.$emit('update:wavBlob', res.file_id);
+            }
+          });
         };
       } else {
         this.hasMicro = '';
-        this.$emit('updateWav', '', 0, this.itemIndex);
-        this.updateData('', 0);
+        this.$emit('update:wavBlob', '');
         // 开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -171,12 +189,7 @@ export default {
       this.playtime = 0;
       this.recordTimes = 0;
       clearInterval(this.timer);
-      this.$emit('deleteWav', this.itemIndex);
-      this.updateData('', 0);
-    },
-    updateData(wav, time) {
-      this.$emit('update:wavBlob', wav);
-      this.$emit('update:recordTime', time);
+      this.$emit('update:wavBlob', '');
     },
   },
 };