使用React中的Web Media Recorder API作为前端，使用Python作为后端来实现实时语音识别

Question

我们正在努力实现什么？

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

使用了哪些技术？

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

有什么问题吗？

在前端，我尝试每秒将音频块作为 Int16Array 发送到后端。另外为了确保与麦克风和音频相关的一切工作正常，停止录制后我只能下载音频的第一个块，持续时间为 1 秒，这是非常清晰的。然而，当音频被打磨到后端时，它会变成一些噪音！

这是录音获取句柄时的 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 安装它。没有太多配置，完全简单。

Answer 2

你有代码示例吗？我也尝试开发这样的应用程序，但仍然不知道如何实时转录