3分钟上手whisper-tiny.en:如何从零搭建第一个浏览器语音转文字应用
【免费下载链接】whisper-tiny.en
whisper-tiny.en 是一个专为浏览器设计的轻量级语音转文字(ASR)模型:基于 OpenAI Whisper 最小的英文版本,转换 ONNX 格式后,配合 Transformers.js 即可在前端直接完成语音识别,全程无需服务器。这篇文章带你用 3 分钟,从零搭建第一个浏览器语音转文字应用 🎙️
1 分钟了解:whisper-tiny.en 是什么?
它由两部分组成:
- ONNX 模型权重:存放在 onnx/ 目录,包含 encoder、decoder 及多种量化版本
- 配套配置文件:模型结构、分词器词表、音频预处理参数等
核心参数一眼看懂:
| 参数 | 数值 | 说明 |
|---|---|---|
| 模型规模 | tiny | Whisper 家族最小款,encoder + decoder 各仅 4 层 |
| 模型维度 d_model | 384 | 见 config.json |
| 输入采样率 | 16000 Hz | 见 preprocessor_config.json |
| 音频分块长度 | 30 秒 | 长音频自动切块处理,见 preprocessor_config.json |
| 支持语言 | 仅英文 | is_multilingual: false,见 generation_config.json |
| 许可证 | Apache-2.0 | 可免费用于个人与商业项目 |
为什么它特别适合浏览器?
- 🌐 纯前端运行:基于 ONNX Runtime Web(WebAssembly / WebGPU 加速),无需部署后端服务
- ⚡ 极速轻量:tiny 是 Whisper 家族参数量最小的版本,低配设备也能流畅跑
- 🔒 隐私友好:音频在用户设备本地处理,敏感语音数据不出浏览器
仓库结构速览:每个文件是做什么的
| 文件 / 目录 | 作用 |
|---|---|
| onnx/ | ONNX 模型权重,如 encoder_model.onnx、decoder_model.onnx 及各量化版本 |
| config.json | 模型结构定义(WhisperForConditionalGeneration) |
| tokenizer.json / vocab.json | 分词器与词表 |
| preprocessor_config.json | 音频特征提取参数(80 维 mel 频谱、16kHz) |
| generation_config.json | 文本生成的默认参数 |
| quant_config.json | 量化配置 |
| README.md | 官方使用说明与完整代码示例 |
第 2 分钟:安装依赖(1 条命令搞定)
确保环境已安装 Node.js,一条命令安装官方 JS 库(完整说明见 README.md):
npm i @huggingface/transformers
第 3 分钟:3 行代码跑通第一段语音转文字
创建语音识别 pipeline 并转写一段音频,核心代码如下:
import { pipeline } from '@huggingface/transformers';
const transcriber = await pipeline(
'automatic-speech-recognition', 'Xenova/whisper-tiny.en'
);
const output = await transcriber('speech.wav');
console.log(output.text);
就这么简单。运行后你会得到音频对应的英文文本,例如对一段英文演讲录音,输出类似:
"And so my fellow Americans, ask not what your country can do for you, ask what you can do for your country."
✅ 恭喜,你的第一个浏览器语音转文字应用已经跑起来了!
💡 小贴士:首次调用会自动下载模型文件并缓存,第二次运行速度会快很多。
进阶:词级时间戳,顺手做个字幕 🎬
想给网页视频加字幕?加一个参数即可拿到每个单词的起止时间:
const output = await transcriber('speech.wav', { return_timestamps: 'word' });
返回结果中包含 chunks 数组,每个元素对应一个单词及其 timestamp 时间区间,例如 { text: 'And', timestamp: [0, 0.78] },可直接用于生成字幕、高亮播放进度。完整输出格式参考 README.md 中的官方示例。
ONNX 量化版本怎么选?
onnx/ 目录里提供了多种量化版本,命名规律很好认:
| 文件后缀 | 精度 | 适用场景 |
|---|---|---|
无后缀 / fp16 | 16 位浮点 | 精度最佳,体积稍大 |
int8 / uint8 | 8 位量化 | 通用平衡之选,体积减半 |
q4 / q4f16 / bnb4 | 4 位量化 | 追求极致加载速度的场景 |
merged | 编码器与解码器合并 | 加载流程更简洁、启动更快 |
浏览器场景下,int8 通常是速度与精度的平衡点,肉眼几乎感知不到精度损失。
常见问题 FAQ
Q:支持中文识别吗? A:whisper-tiny.en 是纯英文模型,generation_config.json 中 is_multilingual 为 false。如需中文,请选择 Whisper 的多语言版本。
Q:录音必须是 16kHz 格式吗? A:模型标准输入为 16kHz(见 preprocessor_config.json),但 Transformers.js 加载音频时会自动处理采样率,你无需手动预处理。
Q:很长的录音会出错吗? A:不会。音频会按 30 秒一块自动切分处理(见 preprocessor_config.json),长录音直接传入即可。
Q:第一次加载为什么慢? A:首次需要下载 ONNX 模型权重与词表文件,完成后会缓存,后续启动基本秒开。
总结
- whisper-tiny.en = ONNX 化的 Whisper 最小英文模型 + Transformers.js,是一套开箱即用的浏览器端语音转文字方案
- 3 分钟 3 步走:1 条命令安装 → 创建 pipeline → 调用转写
- 进阶玩法:词级时间戳做字幕;按需挑选 onnx/ 量化版本平衡体积与精度
现在,你的网页已经可以"听懂"用户说话了——加上一个麦克风按钮,语音入口立刻就位 🚀
【免费下载链接】whisper-tiny.en
更多推荐
所有评论(0)