update，添加语音转文字测试

package.json

@@ -18,6 +18,7 @@
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.3.0",
     "pinia": "^2.0.30",
+    "recorder-core": "^1.3.23122400",
     "register-service-worker": "^1.7.2",
     "swiper": "^9.0.5",
     "three": "^0.150.1",

src/http/Recorder/index.ts

@@ -0,0 +1,6 @@
+import {get,post,} from "@/utils/http"
+
+//url
+export function postwavUpload(data:any){
+    return get('/screen/voice2Text/getFileText',data)
+}

src/http/index.ts

@@ -7,7 +7,7 @@
  * 
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
  */
-import {get,post} from "@/utils/http"
+import {get,post,postupLoad} from "@/utils/http"
 
 //报警数据
 export function getAlarmListData(data:any){
@@ -17,3 +17,8 @@ export function getAlarmListData(data:any){
 export function getAlarmListHistoryData(data:any){
     return get('/screen/alarm/getAlarmListHistory',data)
 }
+
+//文件上传
+export function upload(data:any){
+    return postupLoad('/common/upload',data)
+}

src/router/index.ts

@@ -304,6 +304,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "Elevator",
         component: () => import("../views/Elevator/index.vue"),
       },
+      {
+        path: "/Recorder",
+        name: "Recorder",
+        component: () => import("../views/Recorder/index.vue"),
+      },
 
 
 

src/utils/http.ts

@@ -175,3 +175,34 @@ export function post(staurl: string, data: any = "", method: string = "POST") {
 }
 
 
+
+export function postupLoad(staurl: string, data: any = "", method: string = "POST") {
+
+    
+    let _url = url + staurl //+ "?" + strData;
+    let METHOD = method || "POST"
+    let header = { //请求头设置
+        "Content-Type": "multipart/form-data"
+    }
+    return new Promise((resolve, rejects) => {
+        let params: any = {}
+        // 处理表单结果中文件的操作
+
+        axios({
+            url: _url,
+            method: METHOD,
+            data: data,
+            headers: header
+        }).then(function (res) {
+            // console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
+            resolve(res.data)
+        }).catch(function (err) {
+            // console.log(err)
+            rejects(err)
+        })
+
+
+    })
+}
+
+

src/views/Recorder/index.vue

@@ -0,0 +1,186 @@
+
+
+<template>
+  <div class="container">
+    <div>
+      <div > <!-- 按钮 -->
+        <!-- <button @click="recOpen">打开录音,请求权限</button> -->
+        | <el-button type="success" size="large" @click="recOpen">开始录音</el-button>
+        <el-button type="warning" size="large" @click="recStop">结束录音</el-button>
+        | <el-button type="primary" size="large" @click="recPlay">本地试听</el-button>
+      </div>
+      <div style="padding-top:5px"> <!-- 波形绘制区域 -->
+        <div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom">
+          <div style="height:300px;width:600px;" ref="recwave"></div>
+        </div>
+        <div class="text">{{ text }}</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+//必须引入的核心
+import Recorder from 'recorder-core'
+
+//引入wav格式支持文件；如果需要多个格式支持，把这些格式的编码引擎js文件放到后面统统引入进来即可
+import 'recorder-core/src/engine/wav'
+// import 'recorder-core/src/engine/wav-engine'
+//录制wav格式的用这一句就行
+//import 'recorder-core/src/engine/wav'
+
+//可选的插件支持项，这个是波形可视化插件
+import 'recorder-core/src/extensions/waveview'
+import { postwavUpload } from '@/http/Recorder'
+import { upload as fileUpload } from '@/http/index'
+
+let rec: any = null;
+let wave: any = null;
+let recwave = ref(null);
+let recBlob: any = null
+let text = ref('')
+//打开录音，申请录音权限
+function recOpen() {
+  //创建录音对象
+  rec = Recorder({
+    type: "wav" //录音格式，可以换成wav等其他格式
+    , sampleRate: 16000 //录音的采样率，越大细节越丰富越细腻
+    , bitRate: 16 //录音的比特率，越大音质越好
+    , onProcess: (buffers: any, powerLevel: any, bufferDuration: any, bufferSampleRate: any, newBufferIdx: any, asyncEnd: any) => {
+      //录音实时回调，大约1秒调用12次本回调
+      //可实时绘制波形，实时上传（发送）数据
+      if (wave) wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+    }
+  });
+
+  //打开录音，获得权限
+  rec.open(() => {
+    console.log("录音已打开");
+    if (recwave.value) {//创建音频可视化图形绘制对象
+      wave = Recorder.WaveView({ elem: recwave.value });
+    }
+    rec.start();
+    console.log("已开始录音");
+  }, (msg: any, isUserNotAllow: any) => {
+    //用户拒绝了录音权限，或者浏览器不支持录音
+    alert((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
+    console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
+  });
+}
+
+/**
+ * 开始录音
+ */
+function recStart() {
+  if (!rec) { console.error("未打开录音"); return }
+
+}
+/**
+ * 结束录音
+ */
+function recStop() {
+  if (!rec) { console.error("未打开录音"); return }
+  rec.stop((blob: any, duration: any) => {
+    //blob就是我们要的录音文件对象，可以上传，或者本地播放
+    recBlob = blob;
+    //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.wav"属性）
+    var localUrl = (window.URL || webkitURL).createObjectURL(blob);
+    console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+
+    upload(blob);//把blob文件上传到服务器
+
+    rec.close();//关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    rec = null;
+  }, (err: any) => {
+    console.error("结束录音出错：" + err);
+    rec.close();//关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    rec = null;
+  });
+}
+/**
+ * 上传录音文件到服务器
+ */
+function upload(blob: any) {
+  //使用FormData用multipart/form-data表单上传文件
+  //或者将blob文件用FileReader转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传
+  var form = new FormData();
+  form.append("file", blob, "recorder.wav"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.wav
+  // form.append("key", "value"); //其他参数
+  var reader: any = new FileReader();
+  reader.onloadend = function () {
+    var base64 = (/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result) || [])[1];
+    // console.log("上传的base64编码", base64, blob.size);
+    /**
+    let data = {
+      base64: base64,
+      size: blob.size
+    }
+    postwav(data).then((res: any) => {
+      if (res.err_msg == 'success') {
+        text.value = res.result[0]
+      }
+    })
+     */
+
+  };
+  reader.readAsDataURL(blob);
+
+
+  fileUpload(form).then((res: any) => {
+    if (res.code == '200') {
+      postwavUpload({ url: res.url }).then((result: any) => {
+        if (result.code == 200) {
+          text.value = result.msg
+        }
+
+      })
+
+    }
+  })
+  // var xhr=new XMLHttpRequest();
+  // xhr.open("POST", "/upload/xxxx");
+  // xhr.onreadystatechange=()=>{
+  // 	if(xhr.readyState==4){
+  // 		if(xhr.status==200){
+  // 			console.log("上传成功");
+  // 		}else{
+  // 			console.error("上传失败"+xhr.status);
+  // 		};
+  // 	};
+  // };
+  // xhr.send(form);
+}
+/**
+ * 本地直接试听
+ */
+function recPlay() {
+  //本地播放录音试听，可以直接用URL把blob转换成本地播放地址，用audio进行播放
+  var localUrl = URL.createObjectURL(recBlob);
+  var audio = document.createElement("audio");
+  audio.controls = true;
+  document.body.appendChild(audio);
+  audio.src = localUrl;
+  audio.play(); //这样就能播放了
+
+  //注意不用了时需要revokeObjectURL，否则霸占内存
+  setTimeout(function () { URL.revokeObjectURL(audio.src) }, 5000);
+}
+</script>
+<style scoped>
+.container {
+  width: 1920px;
+  height: 1080px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  font-size: 28px;
+}
+.text {
+  width: 100%;
+  margin-top: 15px;
+  text-align: center;
+}
+</style>
+