使用web Media Recorder API实现实时语音识别，前端使用React，后端使用Python

Question

我们要实现什么?

我们部署了一个人工智能模型来从麦克风流式传输音频，并向用户显示语音文本。像这样。

使用了哪些技术?

• Python用于后端和AI模型
React用于前端
• web Media Recorder API，用于记录和配置音频
WebSocket连接到AI API

问题是什么?

在前端，我尝试每秒将音频块作为Int16Array发送到后端。同时为了确保与麦克风和音频相关的一切都工作良好，在停止录制后，我可以下载音频的第一个块，只有持续时间为15秒，这是非常清楚的。然而，当音频被磨砂到后端时，它就变成了一堆噪音!

这是React代码中记录得到句柄的部分:

useEffect(()=> {
if (recorder === null) {
if (isRecording) {
requestRecorder().then(setRecorder, console.error);
} else {
return;
}
}

// Manage recorder state.
if (isRecording && recorder) {
recorder.start();
} else if (!isRecording && recorder) {
recorder.stop();
}

// send the data every second
const ineterval = setInterval(() => {
if (recorder) {
recorder.requestData();
}
}, 1000);
// Obtain the audio when ready.
const handleData = e => {
setAudioURL(URL.createObjectURL(e.data));
let audioData = []
audioData.push(e.data)
const audioBlob = new Blob(audioData, {'type' : 'audio/wav; codecs=0' })

const instanceOfFileReader = new FileReader();
instanceOfFileReader.readAsArrayBuffer(audioBlob);

instanceOfFileReader.addEventListener("loadend", (event) => {
console.log(event.target.result.byteLength);
const arrayBuf = event.target.result
const int16ArrNew = new Int16Array(arrayBuf, 0, Math.floor(arrayBuf.byteLength / 2));

setJsonData(prevstate => ({...prevstate, 
matrix: int16ArrNew,}))
})
};
if (recorder) {
recorder.addEventListener("dataavailable", handleData);
}
return () => {
if (recorder) {
recorder.removeEventListener("dataavailable", handleData)
clearInterval(ineterval)
}
};
}, [recorder, isRecording])

以前有人遇到过这个问题吗?我做了很多研究，但没有发现任何解决办法。

Answer 1

刚刚检查了这个问题并微笑:))..去年这对我来说是一场噩梦:)。所以只要写上图书馆的名字，将来有人会看到它。要实现实时转换，无论你需要什么，都需要webRTC。对于实时记录，你可以简单地使用recordRTC包，并使用npm安装它。没有太多的配置，而且非常简单。