讯飞语音听写WebApi(流式)【React Native版】

ops/2024/12/27 10:03:03/

假设已有 Base64 编码的音频文件(16kHz, s16le, pcm)

1、获取websocket url

import * as CryptoJS from 'crypto-js';/*** 获取websocket url*/
const getWebSocketUrl = () => {const config = {// 请求地址hostUrl: "wss://iat-api.xfyun.cn/v2/iat",host: "iat-api.xfyun.cn",//在控制台-我的应用-语音听写(流式版)获取appid: '',apiSecret: '',  // 替换为你的 APISecretapiKey: '',		// 替换为你的 APIKeyfile: "./16k_10.pcm", //请填写您的音频文件路径uri: "/v2/iat",highWaterMark: 1280}const date = new Date().toUTCString()// 鉴权签名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))let wssUrl = `${config.hostUrl}?authorization=${authStr}&date=${encodeURIComponent(date).replace(/%2C/g, ',').replace(/%3A/g, ':')}&host=${config.host}`return wssUrl
}

2、建立连接并发送数据

需要注意的是如果 base64 数据很大不能一次发送完成,就需要将 base64 重新转为二进制数据后按需要的大小切割,然后将切割后的二进制片段再重新转为 base64 编码后发送,否则服务端无法正确读取数据。

import { Buffer } from 'buffer'; // 导入 Buffer// 如果有socket地址
const url = getWebSocketUrl();
const ws = new WebSocket(url);
ws.onopen = () => {console.log("🚀 ~ 连接成功")const params = {common: { app_id: '' },//appIdbusiness: {language: "zh_cn",domain: "iat",accent: "mandarin",vad_eos: 5000,dwa: "wpgs",},data: {status: 0,format: "audio/L16;rate=16000",encoding: "raw",},};ws.send(JSON.stringify(WebApiSocketStore.params));try {// 解码 Base64 字符串为二进制数据const audioPcmData = Buffer.from(data.base64Pcm, 'base64');let offset = 0;while (offset < audioPcmData.length) {const subString = audioPcmData.slice(offset, offset + 1280)offset += 1280const isEnd = offset >= audioPcmData.length;const btoa = Buffer.from(subString, 'utf-8').toString('base64');const dataAudio = JSON.stringify({data: {status: isEnd ? 2 : 1,format: "audio/L16;rate=16000",encoding: "raw",audio: `${btoa}`, // 将二进制字符串转换为 Base64},})ws?.send(dataAudio);}} catch (error) {console.log('🚀 ~ Error reading file:', error);}
};
ws.onmessage = (e) => {// a message was receivedconsole.log("🚀 ~ e.data:", e.data)const jsonData = JSON.parse(e?.data || {});// 处理返回结果renderResult(e?.data || {});if (jsonData.code === 0 && jsonData.data.status === 2) {setVoiceText(resultText.current);ws.close();}if (jsonData.code !== 0) {ws.close();}
};ws.onerror = (e) => {// an error occurredconsole.log("🚀 ~ e.error", e.message)
};ws.onclose = (e) => {// connection closedconsole.log("🚀 ~ e.code:", e.code, e.reason)
};

3、处理语音返回结果

const resultText = React.useRef<string>('');
const resultTextTemp = React.useRef<string>('');
// 识别结束 处理返回结果
const renderResult = (resultData: string) => {let jsonData = JSON.parse(resultData);if (jsonData.data && jsonData.data.result) {let data = jsonData.data.result;let str = "";let { ws } = data;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同步给resultTextresultText.current = resultTextTemp.current;}// 将结果存储在resultTextTemp中resultTextTemp.current = resultText.current + str;} else {resultText.current = resultText.current + str;}}
}

http://www.ppmy.cn/ops/145340.html

相关文章

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo 前言摘要引言Task 相关工作方法SDM-UniPS预处理尺度不变的空间光特征编码器像素采样变压器的非局部交互 PS-Mix数据集 实验结果训练细节评估和时间&#xff1a; 消融实验定向照明下的评估没有对…

【UE5 C++课程系列笔记】14——GameInstanceSubsystem与动态多播的简单结合使用

效果 通过在关卡蓝图中触发GameInstanceSubsystem包含的委托&#xff0c;来触发所有绑定到这个委托的事件&#xff0c;从而实现跨蓝图通信。 步骤 1. 新建一个C类 这里命名为“SubsystemAndDelegate” 引入GameInstanceSubsystem.h&#xff0c;让“SubsystemAndDelegate”继承…

vue 嵌套el-dialo,当内层的弹窗弹出时,整个页面被遮罩

活不多说&#xff0c;直接上问题 当在页面上&#xff0c;点击出现第一个弹窗&#xff0c;然后在弹窗里面&#xff0c;点击在再出现一个弹窗时&#xff0c;就是如下效果。 查看Html,出现了遮罩层 Vue的建议是&#xff0c;不建议嵌套 Dialog&#xff0c;但实际上肯定存在嵌套 …

Kafka无锁设计

前言 在分布式消息队列系统中,Kafka 的无锁设计是其高吞吐量和高并发的核心优势之一。通过避免锁的竞争,Kafka 能够在高并发和大规模的生产环境中保持高效的性能。为了更好地理解 Kafka 的无锁设计,我们首先对比传统的队列模型,然后探讨 Kafka 如何通过无锁机制优化生产者…

基于Spring Boot的建材租赁系统

一、系统背景与目的 随着建筑行业的快速发展&#xff0c;建材租赁需求日益增加。传统的建材租赁管理方式大多依赖于纸质文档或简单的电子表格&#xff0c;不仅效率低下&#xff0c;还容易出现信息遗漏和错误。为了解决这些问题&#xff0c;基于Spring Boot的建材租赁系统应运而…

前后端分离(添加用户信息实现思路)

1.先在前端设置一个添加按钮 <el-button type"primary" click"openAddEmployeeDialog">添加员工</el-button> 2.给添加员工绑定事件openAddEmployeeDialog&#xff0c;用户点击该按钮弹出对话框 const openAddEmployeeDialog () > {dial…

前缀树介绍

数风流人物&#xff0c;还看今朝&#xff01; 前缀树 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补全和拼写检查。 前…

DDI-GPT:使用知识图谱增强的大模型对药物相互作用进行可解释的预测

DDI-GPT: Explainable Prediction of Drug-Drug Interactions using Large Language Models enhanced with Knowledge Graphs 是一篇关于药物相互作用&#xff08;DDI&#xff09;预测的研究论文&#xff0c;该研究提出了一个深度学习框架DDI-GPT&#xff0c;它通过结合知识图谱…