ai

src/views/aiModel/index.vue

@@ -17,15 +17,16 @@
       <div v-for="(item, index) in questionList" :key="index">
         <!--右侧-->
         <div class="counsel-right flex" v-if="item.type == 0">
-          <i class="el-icon-loading" v-if="item.status == 0"></i>
+          <i class="el-icon-loading" v-if="item.mstatus == 0"></i>
           <i
             class="el-icon-warning cursor"
-            v-else-if="item.status == 1"
+            v-else-if="item.mstatus == 1"
             @click="sendToBackend(item.content, index)"
           ></i>
-          <div class="content">
+          <div class="content" v-if="item.content">
             <span>{{ item.content }}</span>
           </div>
+          <audio v-else controls autoplay :src="item.mp3url"></audio>
           <div class="header-img">
             <img src="/static/images/aiModel/default.png" />
           </div>
@@ -51,7 +52,10 @@
     </div>
     <div class="searchBtom">
       <div
-        class="el-icon-microphone icon"
+        class="icon"
+        :class="
+          spdisabled ? 'el-icon-turn-off-microphone' : 'el-icon-microphone'
+        "
         title="按住说话"
         :disabled="spdisabled"
         @click="voice"
@@ -80,6 +84,7 @@ export default {
   data() {
     return {
       questionList: [
+        { type: 0, mp3url: "" },
         {
           type: "selectLand",
           content: "sss",
@@ -140,6 +145,34 @@ export default {
         }
       });
     },
+    /**结束录音 */
+    stop() {
+      let _this = this;
+      record.stopRecorder(function (res) {
+        console.log("-blob----", res);
+        _this.questionList.push({
+          type: 0,
+          mp3url: (window.URL || webkitURL).createObjectURL(res.blob),
+          mstatus: 0,
+        });
+        /**处理 */
+        axios({
+          method: "POST",
+          url: `${window.aiURI}/upload`,
+          data: res.formData,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+          .then((mres) => {
+            if (mres.status == 200) {
+            } else {
+            }
+          })
+          .catch(() => {});
+      });
+      this.spdisabled = false;
+    },
     sendDefault() {
       this.sendContent = this.defaultMsg;
       // this.send();
@@ -150,7 +183,7 @@ export default {
         this.questionList.push({
           type: 0,
           content: this.sendContent,
-          status: 0,
+          mstatus: 0,
         });
         this.sendToBackend(this.sendContent, this.questionList.length - 1);
         this.sendContent = "";
@@ -163,30 +196,11 @@ export default {
         // recognition.start(); // 开始语音识别
         this.init();
       } else {
-        /**结束录音 */
-        record.stopRecorder(function (res) {
-          console.log("-blob----",res.blob);
-          /**处理 */
-          axios({
-            method: "POST",
-            url: `${window.aiURI}/upload`,
-            data: { file: res.blob },
-            headers: {
-              "Content-Type": "application/json",
-            },
-          })
-            .then((mres) => {
-              if (mres.status == 200) {
-              } else {
-              }
-            })
-            .catch(() => {});
-        });
-        this.spdisabled = false;
+        this.stop();
       }
     },
     sendToBackend(msg, mindex) {
-      this.questionList[mindex].status = 0;
+      this.questionList[mindex].mstatus = 0;
       axios({
         method: "POST",
         url: `${window.aiURI}/msg`,
@@ -197,7 +211,7 @@ export default {
       })
         .then((mres) => {
           if (mres.status == 200) {
-            this.questionList[mindex].status = 2;
+            this.questionList[mindex].mstatus = 2;
             if (mres.data.type == "selectLand") {
               this.questionList.push({ content: "分析中...请稍等" });
               const loading = this.$loading({
@@ -225,12 +239,12 @@ export default {
                 });
             }
           } else {
-            this.questionList[mindex].status = 1;
+            this.questionList[mindex].mstatus = 1;
             // this.$message.error("发送到后台时发生错误:");
           }
         })
         .catch(() => {
-          this.questionList[mindex].status = 1;
+          this.questionList[mindex].mstatus = 1;
           // this.$message.error("发送到后台时发生错误:");
         });
     },
@@ -339,6 +353,13 @@ export default {
       }
     }
   }
+  audio {
+    height: 40px;
+  }
+  audio::-webkit-media-controls-enclosure {
+    background-color: #b6e1ff3b;
+    color: #fff;
+  }
 }
 .voice {
   width: 75%;

src/views/aiModel/record.js

@@ -5,16 +5,11 @@ import 'recorder-core/src/engine/mp3-engine';
 //录制wav格式的用这一句就行
 import 'recorder-core/src/engine/wav';
 // import { RecordType } from './type';
-var rec, wave, recBlob;
 const record = {
   RecordApp: null,
   recBlob: null,
   /**麦克风授权 */
   getPermission: (fn) => {
-    rec = null;
-    wave = null;
-    recBlob = null;
-
     const newRec = Recorder({
       //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
       type: "mp3",
@@ -59,9 +54,10 @@ const record = {
         console.log('录音成功', blob, '时长:' + duration + 'ms');
         if (blob) {
           record.recBlob = blob;
-          // const formData = new FormData();
+          const formData = new FormData();
           // formData.append('audio', blob);
-          fn({ loading: true, blob });
+          formData.append("file", blob, "recorder.mp3");
+          fn({ loading: true, formData, blob });
         }
         /* eslint-enable */
         record.RecordApp.close();