xiangyuecn / Recorder

html5 js 录音 mp3 wav ogg webm amr g711a g711u 格式,支持pc和Android、iOS部分浏览器、Hybrid App(提供Android iOS App源码)、微信,提供ASR语音识别转文字 H5版语音通话聊天示例 DTMF编码解码
https://xiangyuecn.github.io/Recorder/
MIT License
4.8k stars 1.03k forks source link

大佬请教一个问题 #206

Open wqiucheng opened 9 months ago

wqiucheng commented 9 months ago

大佬您好,我是大四的学生近期在做毕设,其中涉及端对端模块和流式传输的模块,端对端模块用Recorder实现了,但流式这一块一直弄不好,我用另一个库js-audio-recorder实现了,但这个库太老了,到最后还是更想采用Recorder,但尤其是那个库的getNextData方法我一直无法用Recorder来实现。 API:https://recorder-api.zhuyuntao.cn/Recorder/API.html 您能帮我看一下吗,谢谢。 相关代码如下:

const recorder = new Recorder({
  sampleBits: 16,  // 采样位数
  sampleRate: 16000,  // 采样率
  numChannels: 1,  // 声道,设置为1,因为仅是用于识别,不要设置为2
  compiling: true
})

const handlewsRecord = async function (row: Result) {
  if (!ws_record.value) {
    ws_record.value = new WebSocket('ws://127.0.0.1:8000/ws/recordStream');
  }
  // 连接建立成功则启动流式传输
  ws_record.value.onopen = async () => {
    // 监听message事件
    ws_record.value?.addEventListener('message', async function (event) {
      var temp = JSON.parse(event.data);
      if (temp.result && (temp.result != row.text)) {
        row.text = temp.result
        await nextTick(); // 等待DOM渲染完成
      }
    })
    // 加载消息框
    ElMessage.info({
      message: '正在识别',
      type: 'success',
      duration: (row.end - row.begin) * 1000,
      showClose: true
    })
    var start = JSON.stringify({ name: "test.wav", "nbest": 5, signal: "start" })
    ws_record.value?.send(start)
    onReco.value = true
    recorder.start().then(() => {
      // setInterval 方法定期录音(300ms)
      setInterval(() => {
        let newData = recorder.getNextData();
        if (!newData.length) {
          return;
        }
        // 流式上传
        newData.forEach((chunkData) => {
          ws_record.value?.send(chunkData)
        })
      }, 300)
    }, (error) => {
      console.log("录音出错");
    })
  }
  // 定时关闭
  setTimeout(function () {
    recorder.stop()
    var end = JSON.stringify({ name: "test.wav", "nbest": 5, signal: "end" })
    ws_record.value?.send(end)
    recorder.clear()
    ws_record.value?.close()
    ws_record.value = null
    onReco.value = false
    ElMessage.success("识别完成")
  }, (row.end - row.begin) * 1000);
}
xiangyuecn commented 9 months ago

用onProcess就可以了,onProcess里面把录音数据用websocket流式上传,有好几个例子

https://github.com/xiangyuecn/Recorder/blob/474718452b88703b05ddf842246572cb5c700521/README.md?plain=1#L59-L61