Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

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",
@@ -129,22 +134,44 @@ export default {
     },
     /**初始化 */
     init() {
+      let _this = this;
       record.getPermission(function (permiss) {
         if (permiss.status == "fail") {
-          createMessage.warning(permiss.data);
+          _this.$message.warning("语音识别出错: " + permiss.data);
         } else {
           record.startRecorder();
-          // state.confLoading = true;
+          _this.$message.success("开始语音识别...");
+          _this.spdisabled = true;
         }
       });
     },
     /**结束录音 */
-    stopRec() {
-      // state.loading = true;
-      // state.confLoading = true;
+    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;
@@ -156,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 = "";
@@ -168,10 +195,12 @@ export default {
         // if (!recognition) this.initSpeech();
         // recognition.start(); // 开始语音识别
         this.init();
+      } else {
+        this.stop();
       }
     },
     sendToBackend(msg, mindex) {
-      this.questionList[mindex].status = 0;
+      this.questionList[mindex].mstatus = 0;
       axios({
         method: "POST",
         url: `${window.aiURI}/msg`,
@@ -182,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({
@@ -210,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("发送到后台时发生错误:");
         });
     },
@@ -324,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

@@ -1,23 +1,28 @@
-//必须引入的核心
 import Recorder from 'recorder-core';
 //引入mp3格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统引入进来即可
 import 'recorder-core/src/engine/mp3';
 import 'recorder-core/src/engine/mp3-engine';
 //录制wav格式的用这一句就行
 import 'recorder-core/src/engine/wav';
-
+// import { RecordType } from './type';
 const record = {
   RecordApp: null,
   recBlob: null,
   /**麦克风授权 */
   getPermission: (fn) => {
     const newRec = Recorder({
-      type: 'wav',
+      //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
+      type: "mp3",
       bitRate: 16,
-      sampleRate: 16000, //阿里采样率16000
-      onProcess: function (buffers, powerLevel, duration, bufferSampleRate) {
-        console.log(buffers);
-      },
+      sampleRate: 16000,
+      onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
+        //录音实时回调，大约1秒调用12次本回调
+        // document.querySelector(".recpowerx").style.width = powerLevel + "%";
+        // document.querySelector(".recpowert").innerText = formatMs(bufferDuration, 1) + " / " + powerLevel;
+
+        //可视化图形绘制
+        // wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+      }
     });
     //打开录音，获得权限
     newRec.open(
@@ -50,8 +55,9 @@ const record = {
         if (blob) {
           record.recBlob = blob;
           const formData = new FormData();
-          formData.append('audio', blob);
-          fn({ loading: true });
+          // formData.append('audio', blob);
+          formData.append("file", blob, "recorder.mp3");
+          fn({ loading: true, formData, blob });
         }
         /* eslint-enable */
         record.RecordApp.close();