录音权限

src/views/exercise_questions/preview/SortPreview.vue

@@ -292,6 +292,7 @@ export default {
     &-horizontal {
       > span {
         display: flex;
+        flex-wrap: wrap;
         column-gap: 8px;
       }
 

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

@@ -190,43 +190,55 @@ export default {
     },
     // 开始录音
     microphone() {
-      if (!this.audio.paused) {
-        this.$refs[this.wavBlob].pause();
-        this.audio.paused = true;
-      }
-      if (this.disabled) return;
-      if (this.microphoneStatus) {
-        this.hasMicro = 'normal';
-        this.recorder.stop();
-        clearInterval(this.timer);
-        // 录音结束，获取取录音数据
-        let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
-        this.microphoneStatus = false;
-        let reader = new window.FileReader();
-        reader.readAsDataURL(wav);
-        reader.onloadend = () => {
-          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);
+      if (navigator && navigator.mediaDevices) {
+        const constraints = { audio: true }; // 设置只获取音频流
+        navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(() => {
+            if (!this.audio.paused) {
+              this.$refs[this.wavBlob].pause();
+              this.audio.paused = true;
+            }
+            if (this.disabled) return;
+            if (this.microphoneStatus) {
+              this.hasMicro = 'normal';
+              this.recorder.stop();
+              clearInterval(this.timer);
+              // 录音结束，获取取录音数据
+              let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
+              this.microphoneStatus = false;
+              let reader = new window.FileReader();
+              reader.readAsDataURL(wav);
+              reader.onloadend = () => {
+                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('update:wavBlob', '');
+              // 开始录音
+              this.recorder.start();
+              this.microphoneStatus = true;
+              this.recordTimes = 0;
+              clearInterval(this.timer);
+              this.timer = setInterval(() => {
+                this.recordTimes += 1;
+              }, 1000);
             }
+          })
+          .catch((error) => {
+            this.$message.warning('请打开浏览器录音权限');
           });
-        };
       } else {
-        this.hasMicro = '';
-        this.$emit('update:wavBlob', '');
-        // 开始录音
-        this.recorder.start();
-        this.microphoneStatus = true;
-        this.recordTimes = 0;
-        clearInterval(this.timer);
-        this.timer = setInterval(() => {
-          this.recordTimes += 1;
-        }, 1000);
+        this.$message.warning('该浏览器不支持录音');
       }
     },
     // 删除录音
@@ -254,7 +266,7 @@ export default {
     // 音频加载完之后
     onLoadedmetadata(res) {
       this.audio.max_time = parseInt(res.target.duration);
-      this.audio_allTime = secondFormatConversion(this.audio.max_time);
+      this.audio_allTime = this.audio.max_time ? secondFormatConversion(this.audio.max_time) : '00:00';
     },
     // 当音频当前时间改变后，进度条也要改变
     onTimeupdate(res) {
@@ -329,7 +341,7 @@ export default {
     .tips {
       display: block;
       margin-top: 4px;
-      font-size: 12px;
+      font-size: 14px;
       font-weight: 400;
       line-height: 20px;
       color: rgba($color: #000, $alpha: 50%);
@@ -339,7 +351,7 @@ export default {
   .record-time {
     display: block;
     margin-top: 4px;
-    font-size: 12px;
+    font-size: 14px;
     line-height: 20px;
     color: rgba(0, 0, 0, 50%);
   }
@@ -375,7 +387,7 @@ export default {
 
   .audio-time {
     min-width: 35px;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 20px;
   }
@@ -416,7 +428,7 @@ export default {
     border-radius: 28px;
 
     .audio-slider {
-      width: 178px;
+      width: 170px;
     }
   }
 }