保存录音

src/api/app.js

@@ -62,3 +62,7 @@ export function fileUpload(SecurityLevel, file) {
     timeout: 0,
   });
 }
+
+export function GetStaticResources(MethodName, data) {
+  return http.post(`/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`, data);
+}

src/api/exercise.js

@@ -105,7 +105,3 @@ export function PageQueryExerciseShareRecordList(data) {
 export function PageQueryExerciseUserAnswerRecordList(data) {
   return http.post(`/TeachingServer/ExerciseManager/PageQueryExerciseUserAnswerRecordList`, data);
 }
-
-export function GetStaticResources(MethodName, data) {
-  return http.post(`/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`, data);
-}

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

@@ -13,7 +13,7 @@
       @click="playMicrophone"
     />
     <span :class="['record-time', microphoneStatus ? 'record-ing' : '']"
-      >{{ audio.paused ? '' : '-' }}{{ handleDateTime(recordTimes) }}</span
+      >{{ audio.paused ? '' : '-' }}{{ secondFormatConversion(recordTimes) }}</span
     >
     <img
       v-if="microphoneStatus"
@@ -24,12 +24,14 @@
     <SvgIcon v-else icon-class="mic-line" class="record" @click="microphone" />
     <SvgIcon icon-class="delete-back-line" :class="['delete-btn', wavBlob ? '' : 'not-url']" @click="deleteWav" />
 
-    <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 { secondFormatConversion } from '@/utils/transform';
+import { GetStaticResources, GetFileStoreInfo } from '@/api/app';
 export default {
   name: 'SoundRecord',
   props: {
@@ -37,10 +39,6 @@ export default {
       type: String,
       default: '',
     },
-    recordTime: {
-      type: Number,
-      default: 0,
-    },
     itemIndex: {
       type: Number,
       default: null,
@@ -48,6 +46,7 @@ export default {
   },
   data() {
     return {
+      secondFormatConversion,
       recorder: new Recorder({
         sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
         sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
@@ -60,11 +59,25 @@ export default {
         paused: true,
       },
       playtime: 0, // 播放时间
-      recordTimes: JSON.parse(JSON.stringify(this.recordTime)),
+      recordTimes: 0,
+      file_url: '',
+      recordTime: 0,
     };
   },
   computed: {},
-  watch: {},
+  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;
@@ -107,18 +120,7 @@ export default {
         }
       }
     },
-    // 格式化录音时长
-    handleDateTime(time) {
-      let times = 0;
-      if (parseInt(time / 60) < 10) {
-        times = `${`0${parseInt(time / 60)}`.substring(`0${parseInt(time / 60)}`.length - 2)}:${`0${
-          time % 60
-        }`.substring(`0${time % 60}`.length - 2)}`;
-      } else {
-        times = `${parseInt(time / 60)}:${`0${time % 60}`.substring(`0${time % 60}`.length - 2)}`;
-      }
-      return times;
-    },
+
     // 开始录音
     microphone() {
       if (this.microphoneStatus) {
@@ -132,11 +134,20 @@ export default {
         let reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = () => {
-          this.$emit('updateWav', this.itemIndex, 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', this.itemIndex, '', 0);
+        this.$emit('update:wavBlob', '');
         // 开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -155,7 +166,7 @@ export default {
       this.playtime = 0;
       this.recordTimes = 0;
       clearInterval(this.timer);
-      this.$emit('deleteWav', this.itemIndex);
+      this.$emit('update:wavBlob', '');
     },
   },
 };

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -42,14 +42,7 @@
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
               <span class="auto-btn" @click="handleMatically">自动生成</span>
             </div>
-            <SoundRecord
-              v-else
-              :wav-blob="item.audio_wav"
-              :record-time="item.audio_wav_time"
-              :item-index="i"
-              @deleteWav="deleteWav"
-              @updateWav="updateWav"
-            />
+            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <el-input v-if="data.property.learn_type !== 'learn'" v-model="item.definition" placeholder="输入释义" />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
@@ -182,16 +175,6 @@ export default {
     },
     // 自动生成音频
     handleMatically() {},
-    // 清除录音
-    deleteWav(index) {
-      this.data.option_list[index].audio_wav = '';
-      this.data.option_list[index].audio_wav_time = 0;
-    },
-    // 更新录音内容和时间
-    updateWav(index, wav, time) {
-      this.data.option_list[index].audio_wav = wav;
-      this.data.option_list[index].audio_wav_time = time;
-    },
   },
 };
 </script>

src/views/exercise_questions/create/components/exercises/ChooseToneQuestion.vue

@@ -44,14 +44,7 @@
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
               <span class="auto-btn" @click="handleMatically">自动生成</span>
             </div>
-            <SoundRecord
-              v-else
-              :wav-blob="item.audio_wav"
-              :record-time="item.audio_wav_time"
-              :item-index="i"
-              @deleteWav="deleteWav"
-              @updateWav="updateWav"
-            />
+            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -187,16 +180,6 @@ export default {
     },
     // 自动生成音频
     handleMatically() {},
-    // 清除录音
-    deleteWav(index) {
-      this.data.option_list[index].audio_wav = '';
-      this.data.option_list[index].audio_wav_time = 0;
-    },
-    // 更新录音内容和时间
-    updateWav(index, wav, time) {
-      this.data.option_list[index].audio_wav = wav;
-      this.data.option_list[index].audio_wav_time = time;
-    },
     // 答案
     handleItemAnswer(item) {
       const index = this.data.answer.answer_list.findIndex((items) => items.mark === item.mark);

src/views/exercise_questions/data/chinese.js

@@ -8,8 +8,6 @@ export function getOption(content = '') {
     audio_file_id: '',
     pinyin: '',
     definition: '',
-    audio_wav: '',
-    audio_wav_time: 0,
   };
 }
 // 汉字类型列表

src/views/exercise_questions/data/chooseTone.js

@@ -7,8 +7,6 @@ export function getOption(content = '') {
     mark: getRandomNumber(),
     content_view: [],
     audio_file_id: '',
-    audio_wav: '',
-    audio_wav_time: 0,
   };
 }
 

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -120,7 +120,6 @@ import PreviewMixin from './components/PreviewMixin';
 import Strockplayredline from './components/common/Strockplayredline.vue';
 import Strockred from './components/common/Strockred.vue';
 import FreewriteLettle from './components/common/FreewriteLettle.vue';
-import { GetStaticResources } from '@/api/exercise';
 
 export default {
   name: 'ChinesePreview',