Open wqiucheng opened 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); }
用onProcess就可以了,onProcess里面把录音数据用websocket流式上传,有好几个例子
https://github.com/xiangyuecn/Recorder/blob/474718452b88703b05ddf842246572cb5c700521/README.md?plain=1#L59-L61
大佬您好,我是大四的学生近期在做毕设,其中涉及端对端模块和流式传输的模块,端对端模块用Recorder实现了,但流式这一块一直弄不好,我用另一个库js-audio-recorder实现了,但这个库太老了,到最后还是更想采用Recorder,但尤其是那个库的getNextData方法我一直无法用Recorder来实现。 API:https://recorder-api.zhuyuntao.cn/Recorder/API.html 您能帮我看一下吗,谢谢。 相关代码如下: