从 0 到 1：用 Whisper 实现浏览器端语音识别实操（15 行代码，无需后端）

从 0 到 1：用 Whisper 实现浏览器端语音识别实操（15 行代码，无需后端）

【免费下载链接】whisper Robust Speech Recognition via Large-Scale Weak Supervision 项目地址: https://gitcode.com/GitHub_Trending/whisp/whisper

Whisper 是 OpenAI 开源的语音识别模型，本文以它为基础，实现不依赖后端的浏览器语音识别：打开一个网页，对着麦克风说话，几秒后文字就出现在页面上。

它解决什么问题

传统语音识别依赖服务端：浏览器录完音要上传到服务器做识别，涉及 API 费用、网络延迟和隐私顾虑。浏览器端语音识别则是把模型直接跑在页面里，音频数据不离开设备。

Whisper 是一个 Transformer 序列到序列（sequence-to-sequence）模型：编码器部分把音频波形转成特征表示，解码器再逐个生成文字。它用约 68 万小时的多语种音频训练，识别、翻译、语言识别都被统一成"预测特殊 token"，一个模型就能承担多种任务。在浏览器里，它的轻量版本可以被编译为 WebAssembly 或 WebGPU 运行，tiny 规格几秒内就能转完 30 秒的音频。

动手前：环境与模型选型

先安装 Python 版 Whisper，方便你本地快速验证模型效果：

pip install -U openai-whisper
sudo apt install -y ffmpeg   # macOS 用 brew install ffmpeg

选型是浏览器端语音识别的关键，模型规格决定内存占用和速度。官方提供多档规格：

* 官方以 A100 上转写英文音频测得，浏览器内实际速度还取决于设备与运行时。

默认推荐：先用 base 起步，支持 98 种语言，内存可接受，速度留有富余。

最小示例怎么跑通

把模型权重文件放到与页面同目录，将下面这段代码写进一个通过 localhost 或 HTTPS 打开的 HTML 文件里：

const asr = await Whisper.load('tiny.en');        // ① 加载模型
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);

const stop = async () => {
  recorder.stop();
  const blob = new Blob(chunks);                  // ② 组装录音
  const result = await asr.transcribe(blob, { language: 'en' }); // ③ 转写
  document.getElementById('out').textContent = result.text;
};

关键点逐条说明：

• getUserMedia 是浏览器标准的取麦接口，会弹出授权框，且只能在 HTTPS 或 localhost 下使用。
• MediaRecorder 把麦克风流录成一个个音频块（Blob），调用 stop() 结束录音。
• Whisper.load() 来自 Whisper 权重的浏览器运行时（WebAssembly/WebGPU 移植版），模型文件需要你自己托管。
• transcribe() 接收原始音频字节，返回 { text }；要做流式识别，把音频切成 5~10 秒一片依次处理即可。
• language 参数建议显式指定，能提升准确率并避免误判。

进阶能力

多语言识别怎么用

Whisper 的训练数据覆盖 98 种语言。浏览器里可以在转写时传入语言，也可以先让模型自动检测；注意各语言精度随训练数据量波动，低资源语言建议直接上更大模型。

离线使用怎么配置

模型文件从几十 MB 到 GB 不等，每次访问都重新下载不可接受。用 Service Worker 拦截权重文件请求并缓存，首次访问后即可完全离线；超大文件也可放进 IndexedDB，按需用 fetch 取出。

转写性能怎么调优

先用 tiny.en 出"秒出草稿"，再让大模型在后台静默复校一遍。处理采用 5~10 秒滑动窗口，避免阻塞 UI；支持 WebGPU 的设备上，速度明显快于纯 WebAssembly。

常见问题速查

小结

Whisper 的小规格模型已经能在浏览器里提供可用的语音识别，核心是模型规格与设备能力匹配，以及把权重缓存好。后续可以继续探索：接入 TTS 模型做双向语音交互、针对专有词汇做微调、搭建完全离线的演示页面。下一篇会继续讲 Whisper 的 WebGPU 加速与内存优化。

项目资源：README ｜ 模型卡片 ｜ 多语言示例 notebook ｜ 转录实现

【免费下载链接】whisper Robust Speech Recognition via Large-Scale Weak Supervision 项目地址: https://gitcode.com/GitHub_Trending/whisp/whisper