JavaScript实时语音识别：在浏览器中直接调用Qwen3-ASR-0.6B模型

1. 引言

想象一下，你正在开发一个在线会议工具，或者一个语音笔记应用。传统的做法是，用户对着麦克风说话，音频数据被上传到云端服务器，经过复杂的语音识别模型处理，再把文字结果返回给浏览器。这个过程不仅依赖网络，有延迟，还涉及用户隐私数据在互联网上的传输。

有没有一种可能，让这一切都在用户的浏览器里完成？让语音识别像本地软件一样快速响应，同时数据完全不出用户设备，彻底保护隐私？这听起来像是未来的技术，但其实，我们现在就能做到。

本文将带你探索一个激动人心的技术组合：将轻量级的Qwen3-ASR-0.6B语音识别模型，通过WebAssembly或ONNX Runtime Web等技术，直接部署到浏览器中运行。我们将利用JavaScript和WebRTC来捕获麦克风音频，并在前端直接完成语音到文字的转换。整个过程零延迟、无需网络、绝对隐私。无论你是前端开发者，还是对AI应用落地感兴趣的技术人，这篇文章都将为你打开一扇新的大门。

2. 为什么要在浏览器里做语音识别？

在深入技术细节之前，我们先聊聊“为什么”。把AI模型塞进浏览器，听起来很酷，但真的有必要吗？答案是肯定的，而且好处比你想象的要多。

首先是速度，或者说，是“即时性”。云端识别的延迟是无法避免的，从音频上传、服务器排队处理、到结果返回，即使网络再好，也至少有几百毫秒到几秒的延迟。对于实时字幕、语音指令这类应用，这种延迟是致命的。而本地识别，音频采集完立刻就能开始推理，几乎是“所说即所得”。

其次是隐私。这是当前用户越来越关心的问题。语音数据包含了大量个人信息。将原始音频数据发送到第三方服务器，始终存在数据泄露或被滥用的风险。本地识别意味着用户的语音数据从未离开他的电脑或手机，从根源上杜绝了隐私泄露的可能。

再者是成本和可靠性。云端服务通常按调用次数或时长收费，用户量一大，成本就上去了。而且一旦服务器宕机或者网络波动，你的整个语音功能就瘫痪了。本地化部署则没有这些顾虑，一次部署，无限使用，且完全不受外部服务稳定性影响。

当然，挑战也是显而易见的。浏览器的计算资源有限，模型必须足够小、足够快。这正是Qwen3-ASR-0.6B这类轻量化模型的价值所在。它专为边缘和端侧设备设计，在保持不错识别准确率的同时，将模型体积和计算需求降到了浏览器可以承受的范围。

3. 技术栈全景图

要实现这个目标，我们需要一套组合拳。别担心，我会用最直白的方式解释每个部分的作用，它们就像乐高积木，组合起来就能搭建出我们想要的功能。

核心模型：Qwen3-ASR-0.6B 这是我们的大脑。它是一个参数规模为6亿的自动语音识别模型，由通义千问团队开源。0.6B的规模意味着它比动辄数十亿、数百亿参数的大模型要轻巧得多，非常适合在资源受限的环境（比如浏览器）中运行。它支持中英文等多种语言的语音识别。

模型运行时：ONNX Runtime Web 或 纯WebAssembly 这是模型的“翻译官”和“执行引擎”。我们训练好的模型（通常是PyTorch或TensorFlow格式）不能直接在浏览器里跑。我们需要把它转换成一种通用的中间格式——ONNX。ONNX Runtime Web就是一个专门为浏览器环境优化的库，它能加载ONNX格式的模型并高效地执行推理计算。WebAssembly则提供了一种更低层次、接近原生速度的运行环境，适合对性能有极致要求的场景。

音频采集：WebRTC API 这是我们的“耳朵”。WebRTC不仅用于视频通话，其getUserMedia API也是从用户麦克风获取音频流的标准方式。我们可以通过它拿到原始的PCM音频数据，这是模型推理所需的输入。

前端框架：纯JavaScript / 任意现代框架 这是我们的“操作台”和“展示窗”。你可以用原生JavaScript，也可以使用Vue、React等任何你熟悉的前端框架来构建用户界面，处理用户交互，并调用上述的各个模块。

整个流程可以概括为：用户授权麦克风 -> WebRTC获取音频流 -> 前端代码对音频进行预处理（重采样、分帧等） -> 将处理后的数据喂给在浏览器中运行的ONNX模型 -> 模型输出识别文字 -> 前端展示结果。

听起来步骤不少，但当我们一步步拆解后，你会发现每一步都很清晰。

4. 第一步：准备你的模型

模型不能直接拿来用，我们需要为它“瘦身”并“换装”，让它适应浏览器这个新家。

4.1 模型转换：从PyTorch到ONNX

通常，我们从开源社区获得的模型是PyTorch的.pth文件。浏览器的ONNX Runtime不认识这个格式。所以第一步是模型转换。

# 示例：使用Python和torch.onnx进行模型转换
import torch
from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor

# 1. 加载原始的Qwen3-ASR模型和处理器
model_id = "Qwen/Qwen3-ASR-0.6B"
model = AutoModelForSpeechSeq2Seq.from_pretrained(model_id, torch_dtype=torch.float32)
processor = AutoProcessor.from_pretrained(model_id)

# 2. 将模型设置为评估模式，并创建一个假的输入样例（dummy input）
model.eval()
# 假设我们的输入是：批次大小为1，16000Hz采样率下1秒钟的音频（16000个采样点）
dummy_input = torch.randn(1, 16000)

# 3. 执行ONNX导出
# 注意：实际ASR模型的输入可能更复杂（如特征序列），这里仅为示意。
# 你需要根据模型具体的forward方法签名来调整输入和输出名。
torch.onnx.export(
    model,                     # 要转换的模型
    dummy_input,               # 模型输入样例
    "qwen3_asr_0.6b.onnx",    # 输出的ONNX文件名
    input_names=["input_features"],  # 输入节点名
    output_names=["logits"],   # 输出节点名
    dynamic_axes={             # 指定动态维度（如批次大小、序列长度可变）
        'input_features': {0: 'batch_size', 1: 'sequence_length'},
        'logits': {0: 'batch_size', 1: 'sequence_length'}
    },
    opset_version=14,          # ONNX算子集版本
    do_constant_folding=True   # 优化常量
)
print("模型已成功导出为 ONNX 格式。")

关键点：

• 动态轴：设置dynamic_axes非常重要。这告诉ONNX Runtime，我们的输入音频长度是可变的，模型需要能处理不同时长的语音。
• 算子集：确保opset版本与你将要使用的ONNX Runtime版本兼容。
• 验证：转换后，最好用ONNX Runtime（Python版）加载一次，用同样的假数据推理，确保输出与原始PyTorch模型一致。

4.2 模型优化与量化

原始的FP32模型对于浏览器来说可能还是有点大。我们可以通过量化来进一步压缩它。量化是将模型权重从高精度（如32位浮点数）转换为低精度（如8位整数）的过程，能显著减少模型体积和提升推理速度，通常对精度影响很小。

# 示例：使用ONNX Runtime工具进行模型量化（需要安装 onnxruntime 和 onnx）
from onnxruntime.quantization import quantize_dynamic, QuantType

# 动态量化（Post-training quantization）
quantize_dynamic(
    "qwen3_asr_0.6b.onnx",          # 输入FP32模型
    "qwen3_asr_0.6b_quantized.onnx", # 输出INT8模型
    weight_type=QuantType.QUInt8     # 权重量化为8位无符号整数
)
print("模型量化完成。")

经过量化的模型，体积可能减少到原来的1/4，推理速度也能提升不少，这对浏览器环境是巨大的福音。

4.3 模型部署到前端

现在你有了一个.onnx文件。如何让它被网页访问呢？最简单的方法是把它放在你的网站静态资源目录下（比如/public/models/），然后通过JavaScript去加载。对于更大的模型，可以考虑使用HTTP范围请求或者像TensorFlow.js的模型分片机制，但Qwen3-ASR-0.6B量化后应该不大，直接一次性加载即可。

5. 第二步：构建前端应用

有了模型，我们开始搭建前端。这里我们用一个简单的HTML页面来演示核心流程。

5.1 项目结构与初始化

创建一个基本的项目结构：

your-project/
├── index.html
├── script.js
└── models/
    └── qwen3_asr_0.6b_quantized.onnx

在index.html中引入ONNX Runtime Web的库：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器端实时语音识别</title>
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
</head>
<body>
    <h1>实时语音识别演示</h1>
    <button id="startBtn">开始录音</button>
    <button id="stopBtn" disabled>停止录音</button>
    <p>状态：<span id="status">等待开始</span></p>
    <div>
        <h3>识别结果：</h3>
        <p id="result" style="border:1px solid #ccc; padding:10px; min-height:50px;"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

5.2 核心JavaScript逻辑 (script.js)

这是所有魔法发生的地方。我们一步步来写。

// script.js
let mediaRecorder;
let audioChunks = [];
let session; // ONNX Runtime会话
const SAMPLE_RATE = 16000; // Qwen3-ASR模型通常期望16kHz采样率

// 1. 加载ONNX模型
async function loadModel() {
    const statusEl = document.getElementById('status');
    statusEl.textContent = '正在加载语音识别模型...';
    try {
        // 创建ONNX Runtime推理会话
        // 对于WebAssembly后端，可以指定executionProviders
        session = await ort.InferenceSession.create('./models/qwen3_asr_0.6b_quantized.onnx', {
            executionProviders: ['wasm'], // 使用WASM后端，兼容性最好
            // 也可以尝试 'webgl' 后端，可能在某些设备上更快
        });
        statusEl.textContent = '模型加载成功！';
        console.log('模型加载完毕，输入名称：', session.inputNames, '输出名称：', session.outputNames);
    } catch (error) {
        statusEl.textContent = '模型加载失败：' + error.message;
        console.error('加载模型失败：', error);
    }
}

// 2. 请求麦克风权限并开始录音
async function startRecording() {
    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
    const statusEl = document.getElementById('status');

    if (!session) {
        alert('请等待模型加载完成。');
        return;
    }

    try {
        // 获取麦克风音频流
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        statusEl.textContent = '录音中...';

        // 创建一个AudioContext来处理原始音频数据
        const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
        const source = audioContext.createMediaStreamSource(stream);
        // 创建一个单声道分析节点
        const processor = audioContext.createScriptProcessor(4096, 1, 1);

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

        // 当有音频数据块可用时
        processor.onaudioprocess = async (event) => {
            // 获取左声道（单声道）的PCM数据（Float32Array）
            const inputData = event.inputBuffer.getChannelData(0);
            // 这里可以进行实时推理
            // 注意：为了实时性，你可能需要将音频数据缓冲到一定长度（如1秒）再送入模型
            // 本例为了简化，我们演示一个完整的“录音-停止-识别”流程
            audioChunks.push(new Float32Array(inputData)); // 存储原始数据
        };

        // 保存引用，以便停止
        mediaRecorder = { stream, audioContext, processor, source };

        startBtn.disabled = true;
        stopBtn.disabled = false;

    } catch (err) {
        statusEl.textContent = '无法访问麦克风：' + err.message;
        console.error('麦克风错误：', err);
    }
}

// 3. 停止录音并进行识别
async function stopRecordingAndRecognize() {
    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
    const statusEl = document.getElementById('status');
    const resultEl = document.getElementById('result');

    if (!mediaRecorder) return;

    // 断开音频节点，停止录音
    mediaRecorder.processor.disconnect();
    mediaRecorder.source.disconnect();
    mediaRecorder.audioContext.close();
    mediaRecorder.stream.getTracks().forEach(track => track.stop());

    statusEl.textContent = '处理音频中...';
    startBtn.disabled = false;
    stopBtn.disabled = true;

    // 4. 音频预处理：将收集的Float32Array数据拼接并转换为模型需要的格式
    // 计算总长度
    let totalLength = 0;
    for (const chunk of audioChunks) {
        totalLength += chunk.length;
    }
    // 拼接成一个大的Float32Array
    const concatenatedAudio = new Float32Array(totalLength);
    let offset = 0;
    for (const chunk of audioChunks) {
        concatenatedAudio.set(chunk, offset);
        offset += chunk.length;
    }

    // 5. 准备模型输入
    // 注意：实际中，Qwen3-ASR模型可能需要对数梅尔频谱图作为输入，而非原始波形。
    // 这里我们需要一个特征提取器（如librosa的MelSpectrogram的JavaScript实现）。
    // 此处为简化流程，假设 `extractFeatures` 函数能完成此转换。
    // 你需要根据模型具体要求实现或引入相应的音频处理库。
    const features = await extractFeatures(concatenatedAudio, SAMPLE_RATE);

    // 将特征数据转换为Tensor (ONNX Runtime接受的格式)
    const tensorData = new ort.Tensor('float32', features, [1, features.length, featureDim]); // 假设featureDim是特征维度

    try {
        // 6. 执行模型推理
        const feeds = { [session.inputNames[0]]: tensorData }; // 根据模型输入名调整
        const results = await session.run(feeds);
        const logits = results[session.outputNames[0]]; // 根据模型输出名调整

        // 7. 后处理：将模型输出的logits解码为文本
        // 这需要一个解码器（如CTC解码或序列解码），可能还需要词汇表。
        // 假设 `decodePredictions` 函数能完成此工作。
        const recognizedText = decodePredictions(logits.data);

        resultEl.textContent = recognizedText;
        statusEl.textContent = '识别完成！';

    } catch (error) {
        console.error('推理失败：', error);
        statusEl.textContent = '识别过程出错';
        resultEl.textContent = '错误：' + error.message;
    } finally {
        // 清理本次录音数据
        audioChunks = [];
        mediaRecorder = null;
    }
}

// 占位函数：音频特征提取（需要你根据模型要求实现）
async function extractFeatures(audioData, sampleRate) {
    // 这里应实现将原始PCM音频转换为模型输入特征（如80维梅尔频谱图）的逻辑。
    // 可以使用诸如`librosa.js`（如果存在）或自己用JavaScript实现FFT和梅尔滤波器组。
    console.warn('特征提取函数需要实现！');
    // 返回一个假的特征数组 [序列长度, 特征维度]
    return new Float32Array(100 * 80).fill(0); // 示例：100帧，每帧80维
}

// 占位函数：解码预测结果（需要你根据模型输出实现）
function decodePredictions(logitsArray) {
    // 这里应实现从模型输出的logits解码出文本字符串的逻辑。
    // 可能涉及CTC解码（使用束搜索）或自回归解码，并需要加载模型的词汇表。
    console.warn('解码函数需要实现！');
    return "这是识别出的文本（示例）";
}

// 页面加载完成后初始化
window.onload = async () => {
    await loadModel();
    document.getElementById('startBtn').onclick = startRecording;
    document.getElementById('stopBtn').onclick = stopRecordingAndRecognize;
};

代码要点解析：

1. 模型加载：使用ort.InferenceSession.create加载我们准备好的ONNX模型。wasm后端兼容性最好。
2. 音频采集：使用AudioContext和ScriptProcessorNode来获取原始的、未经压缩的PCM音频数据。这比MediaRecorder录制压缩格式（如WebM）后再解码要高效。
3. 音频预处理：这是连接前端音频和AI模型的关键桥梁。extractFeatures函数需要将时域的波形数据，转换成模型认识的特征（通常是频域的梅尔频谱图）。这部分需要你根据Qwen3-ASR模型的具体要求来实现，可能需要引入一个JavaScript的音频处理库或自己编写相关算法。
4. 模型推理：将预处理后的特征数据包装成ONNX Runtime的Tensor对象，然后调用session.run()进行推理。
5. 结果解码：模型输出的是数字（logits），decodePredictions函数需要将这些数字映射回具体的文字。这需要用到模型的“词汇表”和相应的解码算法（如CTC束搜索）。

6. 进阶优化与挑战

上面的代码提供了一个可运行的骨架，但要打造一个真正流畅可用的产品，我们还需要解决几个关键问题：

6.1 实现真正的流式识别

我们的示例是“录音-停止-识别”的模式，这不够实时。真正的流式识别需要：

• 音频缓冲与分帧：持续将采集到的音频数据放入一个环形缓冲区，并以固定长度（如300毫秒）的窗口，配合步长（如100毫秒）截取音频片段送入模型。这样就能实现低延迟的连续识别。
• 增量解码：模型每次推理后，解码器不应从头开始，而应能结合之前的历史信息进行增量解码，保证文本输出的连贯性。

6.2 性能优化

• Web Worker：音频处理和模型推理都是计算密集型任务，放在主线程会阻塞UI，导致页面卡顿。务必使用Web Worker将这些任务移到后台线程。
• 后端选择：ONNX Runtime Web支持wasm、webgl、webgpu等后端。wasm兼容性广，webgl在支持良好的设备上可能更快，新兴的webgpu则潜力巨大。可以尝试不同的后端并进行性能测试。
• 模型剪枝与量化：我们已经做了量化，还可以探索更激进的模型剪枝，在精度和速度间取得最佳平衡。

6.3 处理浏览器的多样性

不同浏览器、不同设备对WebAssembly、Web Audio API的支持程度和性能表现差异很大。需要有降级方案和充分的错误处理。例如，如果WebAssembly加载失败，是否可以提示用户升级浏览器？如果实时处理性能不足，是否可以自动切换到“录音-停止-识别”模式？

7. 总结

将Qwen3-ASR-0.6B这样的语音识别模型直接搬到浏览器里运行，不再是遥不可及的设想。通过ONNX Runtime Web和WebRTC，我们能够构建出零延迟、高隐私、低成本的前端AI应用。虽然这条路线上还有不少工程细节需要打磨，比如高效的音频前端处理、流式解码的实现、以及跨浏览器的性能调优，但方向已经非常清晰。

对于前端开发者而言，这意味着我们的能力边界被极大地扩展了。我们不再仅仅是界面的构建者，也能成为智能交互的直接实现者。对于用户而言，他们能获得更即时、更安全的使用体验。这或许就是下一代Web应用该有的样子：更智能，更敏捷，也更尊重用户。

如果你对这个领域感兴趣，不妨就从今天这个简单的Demo开始，动手试一试。从加载一个模型，到处理一秒钟的音频，再到实现真正的流式识别，每一步的突破都会带来巨大的成就感。前端AI的浪潮才刚刚开始。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。