清音听真Qwen3-ASR-1.7B代码实例：WebSocket流式识别前端集成示例-平芜编程栈

清音听真Qwen3-ASR-1.7B代码实例：WebSocket流式识别前端集成示例

1. 项目概述与核心价值

清音听真Qwen3-ASR-1.7B是一款基于先进语音识别技术的高精度转录系统，相比前代0.6B版本，拥有更强的语义理解能力和上下文联想能力。该系统特别适合处理复杂语音场景，包括中英文混合、专业术语识别和长句处理。

WebSocket流式识别是其实时处理能力的核心特性，允许音频数据边录制边识别，大幅降低延迟，提升用户体验。本文将详细介绍如何在前端项目中集成这一功能。

2. 环境准备与基础配置

2.1 项目依赖安装

首先确保你的前端项目已初始化，然后安装必要的依赖包：

npm install ws axios buffer # 或使用yarn yarn add ws axios buffer

2.2 WebSocket连接基础配置

创建基本的WebSocket连接工具类：

class QwenASRWebSocket { constructor(options = {}) { this.ws = null; this.options = { url: 'wss://your-asr-server-endpoint', sampleRate: 16000, ...options }; this.isConnected = false; this.audioContext = null; this.mediaStream = null; } // 连接WebSocket服务器 connect() { return new Promise((resolve, reject) => { this.ws = new WebSocket(this.options.url); this.ws.onopen = () => { this.isConnected = true; console.log('WebSocket连接已建立'); resolve(); }; this.ws.onerror = (error) => { console.error('WebSocket连接错误:', error); reject(error); }; this.ws.onclose = () => { this.isConnected = false; console.log('WebSocket连接已关闭'); }; // 处理服务器返回的识别结果 this.ws.onmessage = (event) => { this.handleMessage(event.data); }; }); } }

3. 音频采集与流式传输实现

3.1 获取麦克风权限并采集音频

实现音频采集功能，这是流式识别的基础：

class QwenASRWebSocket { // ... 之前的代码 async startRecording() { try { // 获取麦克风权限 this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: this.options.sampleRate, channelCount: 1, // 单声道 echoCancellation: true, noiseSuppression: true } }); // 创建音频上下文 this.audioContext = new AudioContext({ sampleRate: this.options.sampleRate }); // 创建媒体流源节点 const source = this.audioContext.createMediaStreamSource(this.mediaStream); // 创建处理器节点用于处理音频数据 const processor = this.audioContext.createScriptProcessor(4096, 1, 1); // 设置音频处理回调 processor.onaudioprocess = (event) => { if (this.isConnected) { const audioData = event.inputBuffer.getChannelData(0); this.sendAudioData(audioData); } }; // 连接节点 source.connect(processor); processor.connect(this.audioContext.destination); console.log('音频采集已开始'); } catch (error) { console.error('无法访问麦克风:', error); } } }

3.2 音频数据发送处理

实现音频数据的处理和发送逻辑：

class QwenASRWebSocket { // ... 之前的代码 sendAudioData(audioData) { // 将Float32Array转换为Int16Array const int16Data = this.floatTo16BitPCM(audioData); // 转换为ArrayBuffer const buffer = int16Data.buffer; // 发送音频数据 if (this.isConnected) { this.ws.send(buffer); } } // Float32转Int16转换函数 floatTo16BitPCM(float32Array) { const length = float32Array.length; const int16Array = new Int16Array(length); for (let i = 0; i < length; i++) { // 将-1.0到1.0的浮点数转换为-32768到32767的整数 const s = Math.max(-1, Math.min(1, float32Array[i])); int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF; } return int16Array; } // 处理服务器返回的消息 handleMessage(data) { try { const result = JSON.parse(data); if (result.type === 'partial') { // 部分识别结果 this.onPartialResult?.(result.text); } else if (result.type === 'final') { // 最终识别结果 this.onFinalResult?.(result.text); } else if (result.type === 'error') { // 错误信息 this.onError?.(result.message); } } catch (error) { console.error('解析服务器消息失败:', error); } } }

4. 完整集成示例与使用

4.1 创建完整的语音识别组件

下面是一个完整的React组件示例，展示如何集成Qwen3-ASR-1.7B流式识别：

import React, { useState, useRef, useEffect } from 'react'; const VoiceRecognition = () => { const [isRecording, setIsRecording] = useState(false); const [transcript, setTranscript] = useState(''); const [partialResult, setPartialResult] = useState(''); const asrRef = useRef(null); useEffect(() => { // 初始化WebSocket连接 asrRef.current = new QwenASRWebSocket({ url: 'wss://your-asr-server-endpoint', sampleRate: 16000 }); // 设置回调函数 asrRef.current.onPartialResult = (text) => { setPartialResult(text); }; asrRef.current.onFinalResult = (text) => { setTranscript(prev => prev + text + ' '); setPartialResult(''); }; asrRef.current.onError = (error) => { console.error('识别错误:', error); setIsRecording(false); }; // 组件卸载时关闭连接 return () => { if (asrRef.current) { asrRef.current.stopRecording(); asrRef.current.disconnect(); } }; }, []); const startRecording = async () => { try { await asrRef.current.connect(); await asrRef.current.startRecording(); setIsRecording(true); setTranscript(''); setPartialResult(''); } catch (error) { console.error('启动录音失败:', error); } }; const stopRecording = () => { asrRef.current.stopRecording(); setIsRecording(false); }; return ( <div className="voice-recognition"> <h2>语音实时识别</h2> <div className="controls"> {!isRecording ? ( <button onClick={startRecording} className="start-btn"> 开始录音 </button> ) : ( <button onClick={stopRecording} className="stop-btn"> 停止录音 </button> )} </div> <div className="results"> <div className="final-transcript"> <h3>识别结果:</h3> <p>{transcript}</p> </div> {partialResult && ( <div className="partial-result"> <h3>正在识别:</h3> <p>{partialResult}</p> </div> )} </div> <style jsx>{` .voice-recognition { max-width: 600px; margin: 0 auto; padding: 20px; } .controls { margin-bottom: 20px; } button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } .start-btn { background-color: #4CAF50; color: white; } .stop-btn { background-color: #f44336; color: white; } .results { border: 1px solid #ddd; padding: 15px; border-radius: 5px; background-color: #f9f9f9; } .partial-result p { color: #666; font-style: italic; } `}</style> </div> ); }; export default VoiceRecognition;

4.2 高级功能扩展

对于更复杂的应用场景，可以添加以下高级功能：

class AdvancedQwenASR extends QwenASRWebSocket { constructor(options = {}) { super(options); this.silenceTimeout = null; this.silenceThreshold = options.silenceThreshold || 0.1; this.isSpeaking = false; } // 添加静音检测 onAudioProcess(audioData) { super.onAudioProcess(audioData); // 计算音频能量 const energy = this.calculateEnergy(audioData); if (energy > this.silenceThreshold) { this.isSpeaking = true; clearTimeout(this.silenceTimeout); } else if (this.isSpeaking) { // 检测到静音，延迟后发送结束标记 this.silenceTimeout = setTimeout(() => { this.isSpeaking = false; this.sendEndOfSpeech(); }, 2000); // 2秒静音后认为说话结束 } } calculateEnergy(audioData) { let sum = 0; for (let i = 0; i < audioData.length; i++) { sum += audioData[i] * audioData[i]; } return Math.sqrt(sum / audioData.length); } sendEndOfSpeech() { if (this.isConnected) { // 发送结束说话的特殊标记 const endMarker = new ArrayBuffer(0); this.ws.send(endMarker); } } // 添加自定义词汇强化 enhanceVocabulary(words) { if (this.isConnected) { const message = JSON.stringify({ type: 'vocabulary_enhance', words: words }); this.ws.send(message); } } }

5. 常见问题与解决方案

5.1 连接稳定性问题

WebSocket连接可能会因为网络问题中断，需要添加重连机制：

class QwenASRWebSocket { // ... 之前的代码 constructor(options = {}) { // 添加重连相关属性 this.reconnectAttempts = 0; this.maxReconnectAttempts = options.maxReconnectAttempts || 5; this.reconnectDelay = options.reconnectDelay || 1000; } onClose(event) { this.isConnected = false; console.log('连接关闭', event.code, event.reason); // 非正常关闭时尝试重连 if (event.code !== 1000 && this.reconnectAttempts < this.maxReconnectAttempts) { setTimeout(() => { this.reconnectAttempts++; console.log(`尝试第${this.reconnectAttempts}次重连...`); this.connect(); }, this.reconnectDelay * Math.pow(2, this.reconnectAttempts)); } } onOpen() { this.isConnected = true; this.reconnectAttempts = 0; // 重置重连计数 console.log('WebSocket连接已建立'); } }

5.2 音频质量优化

针对不同场景优化音频质量：

// 音频预处理优化 function optimizeAudioQuality(audioData, sampleRate) { // 应用高通滤波器去除低频噪声 const filteredData = applyHighPassFilter(audioData, sampleRate, 80); // 应用自动增益控制 const normalizedData = applyAGC(filteredData); // 应用噪声抑制 const denoisedData = applyNoiseReduction(normalizedData); return denoisedData; } // 简单的自动增益控制实现 function applyAGC(audioData, targetLevel = 0.1) { // 计算当前音频能量 let sum = 0; for (let i = 0; i < audioData.length; i++) { sum += Math.abs(audioData[i]); } const currentLevel = sum / audioData.length; // 计算增益系数 const gain = currentLevel > 0 ? targetLevel / currentLevel : 1; // 应用增益 const result = new Float32Array(audioData.length); for (let i = 0; i < audioData.length; i++) { result[i] = Math.max(-1, Math.min(1, audioData[i] * gain)); } return result; }