uniapp中使用websocket接入科大讯飞语音听写

疯不皮2024-03-20 10:16

给点科大讯飞文档没有的小提示点(demo代码在最下方):

一、关于uniapp的录音api返回数据帧的问题

使用uniapp的录音app时，需要注意recordManager.onFrameRecorded(()=>{})方法,该方法的回调函数根据使用recordManager.start(recordOption)方法时传入的 recordOption配置对象中的frameSize参数决定。该参数决定：每录制指定帧大小的内容后，会回调录制的文件内容 ，不指定则不会回调。暂仅支持 mp3、pcm 格式。 并且由于是当有指定帧大小的文件产生后就马上回调 出来。因此可以直接连接 websocket的发送函数(但是不建议这么做,因为根据要求（采用base64编码，每次发送音频间隔40ms，每次发送音频字节数1280B），建议将处理后的数据在通过websocket传给服务器。)

vue 复制代码 
// 录音配置项
const recordOption = {
  duration: 60000, //指定录音的时长,单位 ms,微信可设置的最大值为 600000(10 分钟),科大讯飞最高支持时间为 60000 (1分钟)
  sampleRate: 16000, // 采样率（pc不支持）
  numberOfChannels: 1, // 录音通道数
  // encodeBitRate: 48000, // 编码码率(默认就是48000)
  frameSize: 1, // 指定帧大小，单位 KB。传入 frameSize 后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。暂仅支持 mp3、pcm 格式。
  format: "pcm", // 音频格式，默认是 aac
};

二、关于返回数据为空的可能性

  1. 没开麦克风导致麦克风没有数据
  2. 麦克风数据杂乱,没有识别出来
  3. 没有使用官方demo中提供的渲染函数(renderResult())

三、在相当久的时间之后返回第一条数据的可能性

  1. 没开麦克风导致麦克风没有数据
  2. 麦克风数据杂乱,没有识别出来

四、科大讯飞建议每40ms发一次1.25kB的数据

五、要使用CryptoJS来解析数据

npm 复制代码 
npm i CryptoJS

六、关于什么时候断联websocket连接

何时触发断联:

  1. 超过设置的录音时间
  2. 手动关闭录音
  3. 录音时出现未知错误(可能是录音设备导致的问题)

触发断联时的各种情况：

  1. 录音结束后，仍有数据没有发送完毕
  2. 录音结束时，服务器数据没有全部返回

关于上述问题，我们需要知道，什么时候算发送完毕？ 答案是：最后一帧的录音 发送之后再返回的数据就是最后一个消息 。 我们无需判断何时发送录音数据的数据队列没有数据，只需要知道科大讯飞返回的消息 中是否为最后一帧

vue 复制代码 
//监听科大讯飞消息返回
    uniSocketTask.onMessage((res) => {
      //收到消息
      const message = JSON.parse(res.data);
      //判断是否存在数据
      if (res.data) {
        console.log("收到服务器消息,并开始渲染");
        renderResult(message);
        if (message.code === 0 && message.data.status === 2) {
          //此时此刻我们可以得知当前科大讯飞返回的数据为最后一帧可以执行关闭连接函数
          //该函数为当前页唯一的关闭连接函数
          closeSocket();
        }
        //收到不正常服务器消息,返回错误到控制台
        if (message.code !== 0) {
          closeSocket();
          console.error(message);
        }
      } else {
        console.log("未监听到消息：原因：", JSON.stringify(res));
      }
    });

下述函数为获得录音结果的回调函数 ，其中有个回调参数为**isLastFrame**，为true则可以得知当前录音数据为最后一帧，录音结束之后再返回的数据会自动带上这个值的。

vue 复制代码 
    //获得录音结果的回调函数
    recordManager.onFrameRecorded((res) => {
      // console.log("开始产生录音结果:");
      // frameBuffer:	type:[ArrayBuffer]	录音分片结果数据
      // isLastFrame:	type:[Boolean]	当前帧是否正常录音结束前的最后一帧
      const { frameBuffer, isLastFrame } = res;
      // console.log("录音分片结果:", toBase64(frameBuffer));
      // console.log("开始判断当前帧为第几帧");
      // 判断当前录音数据是否为最后一帧
      if (isLastFrame) {
        console.log("当前帧为录音最后一帧");
        status = FRAME.STATUS_LAST_FRAME;
      } 
      //存入心跳数据栈中,再合适的时候发送给科大讯飞
      sendDataStack.push(packFrame(frameBuffer)); //入栈
    });

参考文章:

uniapp - 接入科大讯飞语音评测 - 掘金 uniapp即时聊天 websocket封装（建立连接、断线重连、心跳机制、主动关闭） - 掘金 科大迅飞语音听写（流式版）WebAPI，Web前端、H5调用 语音识别，语音搜索，语音听写 - 掘金

文档:

科大讯飞文档:

语音转写_语音识别技术_录音文件识别-讯飞开放平台 语音听写（流式版）WebAPI 文档 | 讯飞开放平台文档中心 讯飞开放平台语音识别音频文件格式说明 | 讯飞开放平台文档中心

uniapp文档

获取websocket对象 uni-app官网 录音api uni.getRecorderManager() | uni-app官网

参考代码

vue 复制代码 
// 语音识别模块
<template>
  <div class="asr">
    <!-- <button @touchstart="openMedia" @touchend="stopRecord">长按开启麦克风</button> -->
    <button @click="openMedia">打开麦克风</button>
    <button @click="stopMedia">关闭麦克风</button>
    <p>{{ renderText }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CryptoJS from "crypto-js";
import UniWebSocket from "@/utils/UniWebSocket.js";
// 科大讯飞接口配置
const config = {
  hostUrl: "wss://iat-api.xfyun.cn/v2/iat",
  host: "iat-api.xfyun.cn",
  appid: "写你自己的",
  apiSecret: "写你自己的",
  apiKey: "写你自己的",
  uri: "/v2/iat",
  highWaterMark: 1280,
  // file: "./16k_10.pcm",
};

// 发给科大讯飞的每一帧的定义
//参考接口调用流程: https://www.xfyun.cn/doc/asr/voicedictation/API.html#%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B
const FRAME = {
  STATUS_FIRST_FRAME: 0, //第一帧音频
  STATUS_CONTINUE_FRAME: 1, //中间的音频
  STATUS_LAST_FRAME: 2, //最后一帧音频，最后一帧必须要发送
};
let status = FRAME.STATUS_FIRST_FRAME;

//心跳定时器
let heartTimer = null;
// 心跳数据(发给科大讯飞的数据)发送队列
let sendDataStack = [];

//websocket实例化
let uniSocketTask = null;

//打开麦克风
function openMedia() {
  status = FRAME.STATUS_FIRST_FRAME; //初始化音频状态(设置当前录音状态为首帧)
  connectSocket(); //创建websocket连接
  startRecord(); //打开录音
}
//关闭麦克风
function stopMedia() {
  //关闭录音
  stopRecord();
  //为什么关闭录音的时候不直接关闭websocket连接,这是因为:
  //关闭麦克风的时候会回调出录音最后一帧,并且会触发监听录音结束事件。
  //发送最后一帧后,得到最后一帧返回的消息后,此时此刻才应该关闭websocket连接
}
/**
 * 获取麦克风权限并开始录音(步骤一)
 */
// 录音配置项
const recordOption = {
  duration: 60000, //指定录音的时长,单位 ms,微信可设置的最大值为 600000(10 分钟),科大讯飞最高支持时间为 60000 (1分钟)
  sampleRate: 16000, // 采样率（pc不支持）
  numberOfChannels: 1, // 录音通道数
  // encodeBitRate: 48000, // 编码码率(默认就是48000)
  // frameSize 为指定帧大小，单位 KB。传入 frameSize 后，每录制指定帧大小的内容后，会回调录制的文件内容，不指定则不会回调。
  // 暂仅支持 mp3、pcm 格式。科大讯飞建议:每40ms发送一个节数为1280B的为压缩PCM格式
  frameSize: 1,
  format: "pcm", // 音频格式，默认是 aac
};
const recordManager = uni.getRecorderManager();
//开启录音
const startRecord = () => {
  recordManager.onStart(() => {
    console.log("开始录音");
    // ...
  });
  // recordManager.onPause(() => {
  //   console.log("录音暂停");
  // });
  recordManager.onStop((res) => {
    // tempFilePath	String	录音文件的临时路径
    console.log("录音停止,文件路径为:", res.tempFilePath);
  });
  recordManager.onError((err) => {
    // errMsg	String	错误信息
    console.log("录音出现错误", err);
  });
  //获得录音结果的回调函数
  recordManager.onFrameRecorded((res) => {
    // console.log("开始产生录音结果:");
    // frameBuffer:	type:[ArrayBuffer]	录音分片结果数据
    // isLastFrame:	type:[Boolean]	当前帧是否正常录音结束前的最后一帧
    const { frameBuffer, isLastFrame } = res;
    // console.log("录音分片结果:", toBase64(frameBuffer));
    // console.log("开始判断当前帧为第几帧");
    // 判断当前录音数据是否为最后一帧
    if (isLastFrame) {
      console.log("当前帧为录音最后一帧");
      status = FRAME.STATUS_LAST_FRAME;
    }
    //存入心跳数据栈中,再合适的时候发送给科大讯飞(第四步)
    sendDataStack.push(packFrame(frameBuffer)); //入栈
  });
  recordManager.start(recordOption);
};
//关闭录音
const stopRecord = () => {
  recordManager.stop();
};

//音频转码(步骤二)[把音频片段转换成base64]
function toBase64(buffer) {
  return uni.arrayBufferToBase64(buffer);
}

/**
 * 使用uniapp封装出来的websocketAPI
 */

// 鉴权签名
function getAuthStr(date) {
  let signatureOrigin = `host: ${config.host}\ndate: ${date}\nGET ${config.uri} HTTP/1.1`;
  let signatureSha = CryptoJS.HmacSHA256(signatureOrigin, config.apiSecret);
  let signature = CryptoJS.enc.Base64.stringify(signatureSha);
  let authorizationOrigin = `api_key="${config.apiKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signature}"`;
  let authStr = CryptoJS.enc.Base64.stringify(
    CryptoJS.enc.Utf8.parse(authorizationOrigin)
  );
  return authStr;
}
function getUrl() {
  // 获取当前时间 RFC1123格式
  let date = new Date().toUTCString();
  //科大讯飞远程连接地址
  let wssUrl =
    config.hostUrl +
    "?authorization=" +
    getAuthStr(date) +
    "&date=" +
    encodeURIComponent(date) +
    "&host=" +
    config.host;
  console.log("websocke科大讯飞的地址为", wssUrl);
  return wssUrl;
}
//创建连接并返回数据
function connectSocket() {
  //创建socketTask实例
  if (uniSocketTask === null) {
    uniSocketTask = uni.connectSocket({ url: getUrl(), success() {} });
    //监听连接成功的事件
    uniSocketTask.onOpen(() => {
      console.log("监听到开启连接成功");
      //启动心跳定时器
      onHeartBeat();
    });
    //监听连接关闭的事件
    uniSocketTask.onClose(() => {
      console.log("监听到关闭连接成功");
    });
    uniSocketTask.onError(() => {
      console.log("监听到连接发生错误");
    });
    //监听科大讯飞消息返回
    uniSocketTask.onMessage((res) => {
      //收到消息
      const message = JSON.parse(res.data);
      //判断是否存在数据
      if (res.data) {
        console.log("收到服务器消息,并开始渲染");
        renderResult(message);
        if (message.code === 0 && message.data.status === 2) {
          //此时此刻我们可以得知当前科大讯飞返回的数据为最后一帧可以关闭连接
          //该函数为当前页唯一的关闭连接函数
          closeSocket();
        }
        //收到不正常服务器消息,返回错误到控制它
        if (message.code !== 0) {
          closeSocket();
          console.error(message);
        }
      } else {
        console.log("未监听到消息：原因：", JSON.stringify(res));
      }
    });
  } else {
    console.log("socketTask实例已存在");
  }
}
//关闭连接
function closeSocket() {
  console.log("开始尝试关闭连接");
  // 关闭心跳
  clearInterval(heartTimer);
  // 关闭连接
  uniSocketTask.close();
}

//发送给科大讯飞的每一帧的模板数据格式
let frame = {
  common: {
    app_id: config.appid,
  },
  business: {
    language: "zh_cn",
    domain: "iat",
    accent: "mandarin",
    dwa: "wpgs", // 可选参数，动态修正
    vad_eos: 5000,
  },
  data: {
    status: 0,
    format: "audio/L16;rate=16000",
    encoding: "raw",
    audio: "", //音频内容
  },
};
//封装录音后的每一"帧"数据(步骤三)
function packFrame(audioData) {
  //转载音频数据
  frame.data.audio = toBase64(audioData);
  switch (status) {
    //首条空白消息(第一帧)
    case FRAME.STATUS_FIRST_FRAME:
      // console.log("当前帧为第一帧");
      frame.data.status = 0;
      status = FRAME.STATUS_CONTINUE_FRAME;
      break;
    //正文(中间帧)
    case FRAME.STATUS_CONTINUE_FRAME:
      // console.log("当前帧为中间帧");
      frame.data.status = 1;
      break;
    //传输结束(最后一帧)
    case FRAME.STATUS_LAST_FRAME:
      // console.log("当前帧为最后一帧");
      frame.data.status = 2;
      break;
  }
  return JSON.stringify(frame);
}

//启动心跳连接定时器(第五步发送数据)
function onHeartBeat() {
  let sendData = null; //发送给科大讯飞的每一帧数据
  heartTimer = setInterval(() => {
    //发送队列中有数据的时候执行下述逻辑发送数据,否则不执行下述函数
    if (sendDataStack.length !== 0) {
      sendData = sendDataStack.shift();
      uniSocketTask.send({
        data: sendData,
        success() {
          console.log("发送成功");
        },
        fail() {
          console.log("发送失败");
        },
      });
    }
  }, 40);
}

//根据科大讯飞语音听写识别结果进行渲染(最后一步,根据onMessage()方法返回的数据进行渲染)
let resultText = "";
let resultTextTemp = "";
let renderText = ref("");
function renderResult(jsonData) {
  // console.log("开始执行渲染函数", jsonData);
  if (jsonData.data && jsonData.data.result) {
    let data = jsonData.data.result;
    let str = ""; // 初始化一个字符串变量用于存储拼接后的识别结果
    let ws = data.ws;
    for (let i = 0; i < ws.length; i++) {
      str = str + ws[i].cw[0].w;
    }
    // 开启wpgs会有此字段(前提：在控制台开通动态修正功能)
    // 取值为 "apd"时表示该片结果是追加到前面的最终结果；取值为"rpl" 时表示替换前面的部分结果，替换范围为rg字段
    if (data.pgs) {
      if (data.pgs === "apd") {
        // 将resultTextTemp同步给resultText
        resultText = resultTextTemp;
      }
      // 将结果存储在resultTextTemp中
      resultTextTemp = resultText + str;
    } else {
      resultText = resultText + str;
    }
    renderText.value = resultTextTemp || resultText || "";
  }
  console.log("渲染后的数据为");
  console.log(renderText.value);
}
</script>

<style scoped lang="scss">
</style>
相关推荐
野生程序猿江辰1 小时前
Mesh AI 让每一位 3D 创作者和 3D 打印者都能轻松把想象变为现实。
aigc·unity3d
BAGAE1 小时前
HTTPS 加密原理介绍
java·c++·websocket·http·均值算法·启发式算法·最小二乘法
虎冯河12 小时前
图像，视频Lora模型训练的Timestep Type时间步类型
aigc·comfyui·模型训练·1024程序员节
墨风如雪13 小时前
AipexBase：AI时代，前端真的能“独立建国”了？
aigc
倔强的石头_15 小时前
2025长沙1024程序员日：为开发者职业发展插上腾飞之翼
aigc
扑克中的黑桃A16 小时前
2025长沙1024程序员日：为开发者职业发展插上腾飞之翼
aigc
咕咚-萌西18 小时前
When NOMA Meets AIGC: Enhanced WirelessFederated Learning
aigc
咖啡教室1 天前
每日一个计算机小知识：Socket
后端·websocket
AAA阿giao1 天前
深入理解 OpenAI AIGC 模型与 Node.js 实战：从零构建歌词生成应用
aigc·openai
CaracalTiger1 天前
告别云端依赖！ComfyUI本地化视频生成实战教程+cpolar实战
python·gpt·开源·aigc·ai编程·1024程序员节·ai-native
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06jdk21下载、安装（Windows、Linux、macOS）07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08Labelme从安装到标注：零基础完整指南09HTML5 敲击乐：从零搭建交互式前端音乐项目10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）