WebSocket 语音识别实战：构建实时识别结果可视化的 Web 界面

1次阅读

没有评论

共计 2585 个字符，预计需要花费 7 分钟才能阅读完成。

在传统的语音识别系统中，客户端通常通过轮询（Polling）或长轮询（Long Polling）的方式向服务器请求识别结果。这种方式存在几个明显的问题：

高延迟 ：客户端需要不断发起请求，无法即时获取最新结果
资源浪费 ：大量无效请求占用带宽和服务器资源
连接开销 ：每次请求都需要重新建立 HTTP 连接

相比之下，WebSocket 提供了全双工的持久连接，具有以下优势：

实时性 ：服务器可以主动推送数据到客户端
低开销 ：只需一次握手就能保持长连接
高效传输 ：二进制帧格式比 HTTP 头部更精简

我们使用 Python 的 websockets 库构建服务端：

import asyncio
import websockets
from speech_recognition import Recognizer

# 初始化语音识别器
recognizer = Recognizer()

async def handle_connection(websocket, path):
    try:
        while True:
            # 接收音频数据
            audio_data = await websocket.recv()

            # 语音识别处理
            text = recognizer.recognize_google(audio_data)

            # 发送识别结果
            await websocket.send(text)
    except websockets.exceptions.ConnectionClosed:
        print("客户端断开连接")

# 启动 WebSocket 服务器
start_server = websockets.serve(handle_connection, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

客户端使用原生 WebSocket API：

const socket = new WebSocket('ws://localhost:8765');

// 连接建立时
socket.onopen = function() {console.log('WebSocket 连接已建立');

    // 获取麦克风输入
    navigator.mediaDevices.getUserMedia({audio: true})
        .then(stream => {const audioContext = new AudioContext();
            const source = audioContext.createMediaStreamSource(stream);
            const processor = audioContext.createScriptProcessor(4096, 1, 1);

            source.connect(processor);
            processor.connect(audioContext.destination);

            // 处理音频数据
            processor.onaudioprocess = function(e) {const audioData = e.inputBuffer.getChannelData(0);
                socket.send(audioData);
            };
        });
};

// 接收识别结果
socket.onmessage = function(event) {
    const result = event.data;
    document.getElementById('result').innerText = result;
    updateWaveform(result); // 更新波形图
};

// 错误处理
socket.onerror = function(error) {console.error('WebSocket 错误:', error);
};

要实现结果的可视化展示，我们可以结合以下技术：

文本实时更新 ：
使用 DOM 操作动态更新识别文本
添加打字机动画效果提升用户体验
波形图展示 ：
使用 Canvas API 绘制音频波形
根据音频数据动态调整波形幅度

function updateWaveform(text) {const canvas = document.getElementById('waveform');
    const ctx = canvas.getContext('2d');

    // 根据文本长度和内容生成波形
    const amplitude = text.length * 2;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();

    for (let i = 0; i < text.length; i++) {const x = (i / text.length) * canvas.width;
        const y = canvas.height / 2 + 
                 Math.random() * amplitude - amplitude/2;

        if (i === 0) {ctx.moveTo(x, y);
        } else {ctx.lineTo(x, y);
        }
    }

    ctx.stroke();}

当系统面临高并发时，需要考虑以下优化策略：