一、系统架构设计

本方案采用纯前端实现方案，通过原生JavaScript构建无框架依赖的语音识别系统，核心架构分为初始化层、数据层、通信层和展示层四大模块。系统启动时完成三大基础准备工作：

环境初始化：创建WebSocket连接管理器、音频处理器和状态监控器
资源预加载：加载语音识别模型配置文件和音频编解码库
事件监听：绑定用户交互事件与系统状态变化事件

系统工作流程遵循”准备-采集-传输-处理-展示”的标准链路：

graph TD
    A[初始化系统] --> B[用户选择模式]
    B -->|麦克风模式| C[实时录音]
    B -->|文件模式| D[读取音频文件]
    C --> E[音频分帧处理]
    D --> E
    E --> F[WebSocket传输]
    F --> G[后端识别处理]
    G --> H[结果解析]
    H --> I[可视化展示]

二、核心模块实现

2.1 初始化配置系统

系统启动时创建关键全局对象：

const ASRSystem = {
    // 连接管理
    wsManager: {
        connection: null,
        msgHandler: null,
        stateHandler: null,
        reconnectAttempts: 0
    },
    // 音频处理
    audioProcessor: {
        recorder: null,
        buffer: [],
        sampleRate: 16000,
        bitDepth: 16,
        chunkSize: 4096 // 每次发送的音频块大小
    },
    // 状态控制
    systemState: {
        isRecording: false,
        isConnected: false,
        mode: 'realtime' // 'realtime' | 'file'
    }
}

关键配置参数说明：
| 参数组 | 参数项 | 推荐值 | 作用说明 |
|————|————|————|—————|
| 音频配置 | 采样率 | 16000Hz | 符合主流ASR模型要求 |
| | 位深度 | 16bit | 保证音频质量平衡 |
| | 声道数 | 单声道 | 减少数据传输量 |
| 传输配置 | 分块大小 | 4KB | 平衡延迟与吞吐量 |
| | 压缩格式 | PCM | 避免编解码损耗 |

2.2 音频采集与处理

实现两种数据采集模式：

实时录音模式

function startRealtimeRecording() {
    // 初始化录音器
    ASRSystem.audioProcessor.recorder = new Recorder({
        sampleBits: ASRSystem.audioProcessor.bitDepth,
        sampleRate: ASRSystem.audioProcessor.sampleRate,
        numChannels: 1
    });
    // 设置分帧回调
    ASRSystem.audioProcessor.recorder.onprocess = (data) => {
        if(ASRSystem.systemState.isConnected) {
            sendAudioChunk(data);
        } else {
            ASRSystem.audioProcessor.buffer.push(data);
        }
    };
    ASRSystem.audioProcessor.recorder.start();
    ASRSystem.systemState.isRecording = true;
}

文件上传模式

async function processAudioFile(file) {
    const arrayBuffer = await file.arrayBuffer();
    const audioContext = new AudioContext({ sampleRate: 16000 });
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    // 重采样处理（当文件采样率不匹配时）
    if(audioBuffer.sampleRate !== 16000) {
        const offlineCtx = new OfflineAudioContext(1, audioBuffer.length, 16000);
        const source = offlineCtx.createBufferSource();
        source.buffer = audioBuffer;
        source.connect(offlineCtx.destination);
        source.start();
        const resampledBuffer = await offlineCtx.startRendering();
        return resampledBuffer.getChannelData(0);
    }
    return audioBuffer.getChannelData(0);
}

2.3 WebSocket通信管理

实现带重连机制的可靠传输：

function initWebSocketConnection() {
    const wsUrl = `wss://${ASR_SERVER_ENDPOINT}/asr`;
    ASRSystem.wsManager.connection = new WebSocket(wsUrl);
    ASRSystem.wsManager.connection.onopen = () => {
        console.log('WebSocket连接建立');
        ASRSystem.systemState.isConnected = true;
        // 发送缓冲区的音频数据
        flushAudioBuffer();
    };
    ASRSystem.wsManager.connection.onmessage = (event) => {
        const result = parseASRResult(event.data);
        updateUIResult(result);
    };
    ASRSystem.wsManager.connection.onclose = () => {
        ASRSystem.systemState.isConnected = false;
        if(ASRSystem.systemState.isRecording) {
            setTimeout(initWebSocketConnection, 3000); // 自动重连
        }
    };
}

通信协议设计：

{
    "header": {
        "version": "1.0",
        "request_id": "uuid",
        "timestamp": 1630000000
    },
    "payload": {
        "mode": "realtime/file",
        "audio": {
            "format": "pcm",
            "data": "base64_encoded_audio"
        },
        "config": {
            "hotwords": ["技术", "开发"],
            "enable_itn": true
        }
    }
}

2.4 识别结果处理

实现带时间戳的结果解析：

function parseASRResult(rawData) {
    const { words, timestamp } = JSON.parse(rawData);
    return words.map(word => ({
        text: word.content,
        start: word.start_time / 1000, // 转换为秒
        end: word.end_time / 1000,
        confidence: word.confidence
    }));
}
function renderResultWithTimeline(results) {
    const timelineContainer = document.getElementById('timeline');
    timelineContainer.innerHTML = results.map(item => `
        <div class="word-item" style="left: ${item.start*100}%">
            <span class="word-text">${item.text}</span>
            <span class="word-time">${item.start.toFixed(2)}-${item.end.toFixed(2)}s</span>
        </div>
    `).join('');
}

三、性能优化策略

3.1 音频传输优化

动态分块调整：根据网络状况动态调整分块大小（2KB-8KB）
压缩传输：可选OPUS编码压缩（需后端支持）
缓冲策略：
- 实时模式：保持500ms缓冲
- 文件模式：预加载2秒数据

3.2 错误处理机制

const ERROR_CODES = {
    NETWORK_TIMEOUT: 1001,
    AUDIO_FORMAT_ERROR: 2001,
    SERVER_BUSY: 3001
};
function handleError(code) {
    switch(code) {
        case ERROR_CODES.NETWORK_TIMEOUT:
            showToast('网络连接超时，正在重试...');
            initWebSocketConnection();
            break;
        case ERROR_CODES.SERVER_BUSY:
            showToast('服务器繁忙，请稍后再试');
            stopRecording();
            break;
        // 其他错误处理...
    }
}

四、部署与扩展建议

跨平台适配：
- 移动端：添加权限请求处理
- 桌面端：支持更多音频输入设备
安全增强：
- 添加WebSocket握手验证
- 实现音频数据加密传输

监控体系：

// 性能监控示例
const metrics = {
    audioLatency: 0,
    networkLatency: 0,
    successRate: 0
};
function updateMetrics(type, value) {
    metrics[type] = (metrics[type] * 0.9 + value * 0.1); // 滑动平均
    sendMetricsToBackend(metrics);
}

本方案通过模块化设计实现了高可维护性的语音识别前端系统，开发者可根据实际需求调整音频参数、通信协议和结果展示方式。对于生产环境部署，建议增加服务降级策略和流量控制机制，确保系统稳定性。

Web前端语音识别技术解析：基于FunASR的架构设计与实现