web网页录音(recorder.js)并上传后端语音转文字(Vosk)

以下是一个简化的代码示例，展示了如何使用recorder.js录音，并通过WebSocket发送到后端进行处理，后端使用vosk进行语音转文本。

前端代码（HTML + JavaScript）:




<!DOCTYPE html>
<html>
<head>
    <title>语音识别示例</title>
</head>
<body>
    <button id="recordButton">录音</button>
    <script src="https://cdn.jsdelivr.net/npm/recorder-js@1.1.0/dist/recorder.js"></script>
    <script>
        const recorder = new Recorder({
            sampleRate: 16000, // 与vosk的预期采样率一致
            bitRate: 16 // 比特率
        });
 
        document.getElementById('recordButton').addEventListener('click', () => {
            if (recorder.getRecordingState() === 'recording') {
                recorder.stop();
                document.getElementById('recordButton').innerText = '录音';
            } else {
                recorder.start();
                document.getElementById('recordButton').innerText = '停止';
            }
        });
 
        recorder.onstop = (blob) => {
            const socket = new WebSocket('ws://your-server-address');
            socket.binaryType = "arraybuffer";
 
            socket.onopen = () => {
                socket.send(blob);
            };
 
            socket.onmessage = (event) => {
                console.log(event.data); // 输出转换后的文本
            };
 
            socket.onclose = () => {
                console.log('WebSocket 连接已关闭');
            };
        };
    </script>
</body>
</html>

后端代码（Python + Vosk）:




import json
import websockets
import vosk
 
async def handle_websocket(websocket, path):
    rec = vosk.KaldiRecognizer(model, 16000)
    
    async for message in websocket:
        if message is not None:
            # 处理接收到的音频数据
            if rec.AcceptWaveform(message, 0):
                # 识别并输出文本
                print(json.dumps({'text': rec.Result()}))
            else:
                print(json.dumps({'partial': rec.PartialResult()}))
 
    # 完成识别并输出最终文本
    print(json.dumps({'text': rec.FinalResult()}))
 
model_path = 'path/to/vosk-model'
model = vosk.Model(model_path)
 
start_server = websockets.serve(handle_websocket, "0.0.0.0", 8765)
 
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

确保替换your-server-address为实际WebSocket服务器地址，以及path/to/vosk-model为实际的Vosk模型路径。

这个示例提供了一个简单的交互，用户可以点击按钮来开始和停止录音，录音的音频通过WebSocket发送到后端，后端使用Vosk进行语音识别，并将识别结果以JSON的形式发送回前端。

web网页录音(recorder.js)并上传后端语音转文字(Vosk)

评论已关闭

推荐阅读