admin管理员组文章数量:1026989
使用react
基础前端框架：react-native
语音交互服务：华为云
1、react-native-audio录制音频
华为云支持的音频编码格式如下表：
一共有六种，但是一般用下表的前两种，即不压缩的裸音频格式
| audio_format取值 | 说明 |
|---|---|
| pcm16k16bit | 16k16bit单通道录音数据。 |
| pcm8k16bit | 8k16bit单通道录音数据。 |
audioPath = AudioUtils.DownloadsDirectoryPath + '/luyin.aac'; //路径下的文件名AudioRecorder.prepareRecordingAtPath(audioPath, {SampleRate: 16000, //采样率Channels: 1, //通道AudioQuality: "High", //音质（Low, Medium, High）AudioEncoding: "aac", //音频编码（aac编码iOS和Android均支持）AudioEncodingBitRate: 256000, //音频编码比特率IncludeBase64: true, //是否是base64格式});
最后发现react-native-audio录出来的音频编码不符合，需要在服务端再转一次音频编码。
2、react-native-fs分片读取录音文件转为base64
计算方式：
16000采样率： 1s音频 16000采样点
16bits： 一个采样点 16bits = 2 bytes
1s ： = 1000ms
即 100ms * 16000 * 2bytes / 1000ms = 3200bytes
ITEM_SIZE = 3200;
RNFS.read(audioPath, ITEM_SIZE, ITEM_SIZE*itemIndex, "base64")
.then()
.catch()
3、base64转化为二进制数据
function base64ToUint8Array(base64String) {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');const rawData = window.atob(base64);const outputArray = new Uint8Array(rawData.length);for (let i = 0; i < rawData.length; ++i) {outputArray[i] = rawData.charCodeAt(i);}return outputArray;
}
4、 使用websocket与服务端交互
举例：华为云-实时语音转写连续模式-websocket握手
交互流程:
握手成功——发出开始指令——传输二进制数据——接收文本数据——…——发出结束指令——握手结束
实时语音识别api WebSocket协议：
0.0s: 【连接】发起WebSocket请求
0.1s: 【连接】连接建立
0.1s: 【发送开始参数帧】发送鉴权及识别参数
0.1s-0.2s: 【本地】录制100ms的录音
0.2s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
0.2s-0.3s: 【本地】录制100ms的录音
0.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
…
1.2s-1.3s: 【本地】录制100ms的录音
1.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
1.31s：【接收结果】收到0s-1s这段语音的一句话临时识别结果
…
4.2-4.3s: 【本地】录制100ms的录音
4.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
4.39s：【接收结果】收到0s-4.1s这段语音的一句话最终识别结果
…
9.9s-10.0s: 【本地】录制100ms的录音
10.0s: 【发送音频数据帧】发送上面100ms的录音数据到服务器
10.0s: 【发送结束帧】 告知服务端音频结束
10.3s：【接收结果】收到7.1-10.0 这段语音的一句话最终识别结果
5、websocket发送二进制数据
websocket.binaryType = 'arraybuffer';
webSocket.send(arrayBuffer);
使用react
基础前端框架：react-native
语音交互服务：华为云
1、react-native-audio录制音频
华为云支持的音频编码格式如下表：
一共有六种，但是一般用下表的前两种，即不压缩的裸音频格式
| audio_format取值 | 说明 |
|---|---|
| pcm16k16bit | 16k16bit单通道录音数据。 |
| pcm8k16bit | 8k16bit单通道录音数据。 |
audioPath = AudioUtils.DownloadsDirectoryPath + '/luyin.aac'; //路径下的文件名AudioRecorder.prepareRecordingAtPath(audioPath, {SampleRate: 16000, //采样率Channels: 1, //通道AudioQuality: "High", //音质（Low, Medium, High）AudioEncoding: "aac", //音频编码（aac编码iOS和Android均支持）AudioEncodingBitRate: 256000, //音频编码比特率IncludeBase64: true, //是否是base64格式});
最后发现react-native-audio录出来的音频编码不符合，需要在服务端再转一次音频编码。
2、react-native-fs分片读取录音文件转为base64
计算方式：
16000采样率： 1s音频 16000采样点
16bits： 一个采样点 16bits = 2 bytes
1s ： = 1000ms
即 100ms * 16000 * 2bytes / 1000ms = 3200bytes
ITEM_SIZE = 3200;
RNFS.read(audioPath, ITEM_SIZE, ITEM_SIZE*itemIndex, "base64")
.then()
.catch()
3、base64转化为二进制数据
function base64ToUint8Array(base64String) {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');const rawData = window.atob(base64);const outputArray = new Uint8Array(rawData.length);for (let i = 0; i < rawData.length; ++i) {outputArray[i] = rawData.charCodeAt(i);}return outputArray;
}
4、 使用websocket与服务端交互
举例：华为云-实时语音转写连续模式-websocket握手
交互流程:
握手成功——发出开始指令——传输二进制数据——接收文本数据——…——发出结束指令——握手结束
实时语音识别api WebSocket协议：
0.0s: 【连接】发起WebSocket请求
0.1s: 【连接】连接建立
0.1s: 【发送开始参数帧】发送鉴权及识别参数
0.1s-0.2s: 【本地】录制100ms的录音
0.2s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
0.2s-0.3s: 【本地】录制100ms的录音
0.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
…
1.2s-1.3s: 【本地】录制100ms的录音
1.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
1.31s：【接收结果】收到0s-1s这段语音的一句话临时识别结果
…
4.2-4.3s: 【本地】录制100ms的录音
4.3s： 【发送音频数据帧】发送上面100ms的录音数据到服务器
4.39s：【接收结果】收到0s-4.1s这段语音的一句话最终识别结果
…
9.9s-10.0s: 【本地】录制100ms的录音
10.0s: 【发送音频数据帧】发送上面100ms的录音数据到服务器
10.0s: 【发送结束帧】 告知服务端音频结束
10.3s：【接收结果】收到7.1-10.0 这段语音的一句话最终识别结果
5、websocket发送二进制数据
websocket.binaryType = 'arraybuffer';
webSocket.send(arrayBuffer);
本文标签： 使用React
版权声明：本文标题：使用react 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1700123150a346420.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论