浏览器里的语音识别：Whisper Web 如何用3步在你电脑上跑起来【免费下载链接】whisper-webML-powered speech recognition directly in your browser项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-webwhisper-web 是一个纯前端实现的浏览器端语音识别项目：录音、文件还是网络音频，它都能直接在浏览器里转成文字。如果你不想把音频上传到任何服务器，或者只是想找一个 Whisper 教程来理解浏览器端 ML 推理，这个项目值得花十分钟跑一遍。它是什么：语音不用出浏览器，文字直接出来一句话版本：whisper-web 把 OpenAI 的 Whisper 语音识别模型搬进了浏览器，录音、转写、展示全部发生在本地，数据不出机器。它的价值在两个地方。第一，隐私：会议录音、客户访谈这类音频往往不能外传，而这里整个推理过程都在你电脑里完成，没有上传环节。第二，门槛：不用配 Python 环境、不用申请 API Key，装好依赖就能用。底层是 Transformers.js——一个让机器学习模型直接在浏览器中运行的 JavaScript 库，Whisper 模型以量化权重形式加载，首次使用在线下载一次，之后走浏览器缓存。三步跑起来：clone、装依赖、启动整个过程只需要三条命令。先获取代码：git clone https://gitcode.com/GitHub_Trending/wh/whisper-web拿到的是完整的前端工程。进入目录安装依赖：npm install这一步会按 package.json 把 React、@xenova/transformers、Vite 等依赖全部装好，模型本身不在这一步下载，而是等你点击转写时在线拉取。然后启动开发服务器：npm run devVite 会在本地起一个开发服务并打印访问地址（默认 5173 端口），用浏览器打开就能看到主页面。有一个浏览器相关的坑要提前说：Firefox 用户需要去 about:config 把 dom.workers.modules.enabled 改成 true，否则项目的 Web Worker（一个独立线程，专门用来跑模型推理，避免卡住界面）无法加载，转写会直接失败。拆解三个管命脉的文件整个工程不算复杂，大致布局看一眼就够了：位置职责src/components/界面层：音频来源、播放器、转写按钮、设置弹窗src/hooks/状态与消息桥：管理转写流程的 React Hooksrc/worker.js识别引擎：模型加载与推理都在这src/utils/全局常量与音频工具函数真正影响运行行为的，是下面三个文件。src/utils/Constants.ts 是默认值的中枢。采样率 16000（Whisper 模型要求 16kHz 输入，这里统一重采样）、默认模型、默认语言、是否量化，全在这一小堆常量里。改它，改的是整个应用的行为，而不是某个界面的局部表现。src/worker.js 是推理引擎。浏览器主线程一旦阻塞，页面就卡死了，所以把模型加载和转写放进 Web Worker 里跑，界面才能保持流畅——这就是它单独存在的原因。打开这个文件你会发现两件事：一是开头就写了 env.allowLocalModels = false，意味着模型永远从 Hugging Face 在线加载，你就算把模型文件放本地也不会生效，想换模型来源得先动这行；二是它内置了一套模型管理策略，比如 whisper-medium 会自动切到 no_attentions 修订版来避免内存溢出，不同模型系列还会用不同的滑动窗口参数。src/hooks/useTranscriber.ts 是主线程和 Worker 之间的状态机。它把你在界面上选的模型、语言、量化选项打包发进 worker，再把 worker 回传的消息翻译成界面状态：进度条、逐块刷新的部分文本、完成信号、出错提示。以后想加新的界面状态，改的就是这个 switch 里的分支。顺着这条链路读源码很快：Constants 出默认值 → useTranscriber 把参数发进 worker → worker 跑完把结果发回来。改哪里能让识别更快更准想提升准确率：把 Constants.ts 里的 DEFAULT_MODEL 从 Xenova/whisper-tiny 换成 Xenova/whisper-base。tiny 的量化权重只有约 41MB，速度快但精度有限；base 大约 77MB，效果明显更好。改动后重启开发服务器即可，设置弹窗里的默认选项也会跟着变，worker 侧的 PipelineFactory 检测到模型变化会自动释放旧模型、加载新模型，中途切换会触发一次新的下载。想换默认体验：同文件里的 DEFAULT_LANGUAGE、DEFAULT_MULTILINGUAL 决定了打开页面时的语言设定。而速度方面更推荐在界面上开 Quantized（量化）选项——它把模型权重的数值精度压缩，下载体积更小、内存占用更低；代码里其实已经为移动端浏览器默认开启了这个选项，原因就是浏览器里的内存预算很紧。两个约束也在这一步说清：模型首次使用必须联网（下载后走缓存，所以离线环境要提前联网跑一次）；Firefox 记得上面那条 Web Worker 配置，否则 worker 加载失败，整个识别链路都走不通。值不值得继续玩，以及下一步往哪走whisper-web 最打动人的点，是它证明了浏览器端语音识别可以不依赖任何后端：录音、推理、展示一条龙全在本地完成，对隐私敏感的场景几乎可以直接套用，也可以当作一个干净的浏览器 ML 学习样本。二次开发的空间不小——把带时间戳的输出接到笔记工具或字幕流水线、换更大的模型、接入 LLM 做文本润色，都是顺理成章的下一步。核心链路只有 Constants、useTranscriber、worker 三站，链路短，值得顺着读一遍。【免费下载链接】whisper-webML-powered speech recognition directly in your browser项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
浏览器里的语音识别：Whisper Web 如何用3步在你电脑上跑起来【免费下载链接】whisper-webML-powered speech recognition directly in your browser项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-webwhisper-web 是一个纯前端实现的浏览器端语音识别项目：录音、文件还是网络音频，它都能直接在浏览器里转成文字。如果你不想把音频上传到任何服务器，或者只是想找一个 Whisper 教程来理解浏览器端 ML 推理，这个项目值得花十分钟跑一遍。它是什么：语音不用出浏览器，文字直接出来一句话版本：whisper-web 把 OpenAI 的 Whisper 语音识别模型搬进了浏览器，录音、转写、展示全部发生在本地，数据不出机器。它的价值在两个地方。第一，隐私：会议录音、客户访谈这类音频往往不能外传，而这里整个推理过程都在你电脑里完成，没有上传环节。第二，门槛：不用配 Python 环境、不用申请 API Key，装好依赖就能用。底层是 Transformers.js——一个让机器学习模型直接在浏览器中运行的 JavaScript 库，Whisper 模型以量化权重形式加载，首次使用在线下载一次，之后走浏览器缓存。三步跑起来：clone、装依赖、启动整个过程只需要三条命令。先获取代码：git clone https://gitcode.com/GitHub_Trending/wh/whisper-web拿到的是完整的前端工程。进入目录安装依赖：npm install这一步会按 package.json 把 React、@xenova/transformers、Vite 等依赖全部装好，模型本身不在这一步下载，而是等你点击转写时在线拉取。然后启动开发服务器：npm run devVite 会在本地起一个开发服务并打印访问地址（默认 5173 端口），用浏览器打开就能看到主页面。有一个浏览器相关的坑要提前说：Firefox 用户需要去 about:config 把 dom.workers.modules.enabled 改成 true，否则项目的 Web Worker（一个独立线程，专门用来跑模型推理，避免卡住界面）无法加载，转写会直接失败。拆解三个管命脉的文件整个工程不算复杂，大致布局看一眼就够了：位置职责src/components/界面层：音频来源、播放器、转写按钮、设置弹窗src/hooks/状态与消息桥：管理转写流程的 React Hooksrc/worker.js识别引擎：模型加载与推理都在这src/utils/全局常量与音频工具函数真正影响运行行为的，是下面三个文件。src/utils/Constants.ts 是默认值的中枢。采样率 16000（Whisper 模型要求 16kHz 输入，这里统一重采样）、默认模型、默认语言、是否量化，全在这一小堆常量里。改它，改的是整个应用的行为，而不是某个界面的局部表现。src/worker.js 是推理引擎。浏览器主线程一旦阻塞，页面就卡死了，所以把模型加载和转写放进 Web Worker 里跑，界面才能保持流畅——这就是它单独存在的原因。打开这个文件你会发现两件事：一是开头就写了 env.allowLocalModels = false，意味着模型永远从 Hugging Face 在线加载，你就算把模型文件放本地也不会生效，想换模型来源得先动这行；二是它内置了一套模型管理策略，比如 whisper-medium 会自动切到 no_attentions 修订版来避免内存溢出，不同模型系列还会用不同的滑动窗口参数。src/hooks/useTranscriber.ts 是主线程和 Worker 之间的状态机。它把你在界面上选的模型、语言、量化选项打包发进 worker，再把 worker 回传的消息翻译成界面状态：进度条、逐块刷新的部分文本、完成信号、出错提示。以后想加新的界面状态，改的就是这个 switch 里的分支。顺着这条链路读源码很快：Constants 出默认值 → useTranscriber 把参数发进 worker → worker 跑完把结果发回来。改哪里能让识别更快更准想提升准确率：把 Constants.ts 里的 DEFAULT_MODEL 从 Xenova/whisper-tiny 换成 Xenova/whisper-base。tiny 的量化权重只有约 41MB，速度快但精度有限；base 大约 77MB，效果明显更好。改动后重启开发服务器即可，设置弹窗里的默认选项也会跟着变，worker 侧的 PipelineFactory 检测到模型变化会自动释放旧模型、加载新模型，中途切换会触发一次新的下载。想换默认体验：同文件里的 DEFAULT_LANGUAGE、DEFAULT_MULTILINGUAL 决定了打开页面时的语言设定。而速度方面更推荐在界面上开 Quantized（量化）选项——它把模型权重的数值精度压缩，下载体积更小、内存占用更低；代码里其实已经为移动端浏览器默认开启了这个选项，原因就是浏览器里的内存预算很紧。两个约束也在这一步说清：模型首次使用必须联网（下载后走缓存，所以离线环境要提前联网跑一次）；Firefox 记得上面那条 Web Worker 配置，否则 worker 加载失败，整个识别链路都走不通。值不值得继续玩，以及下一步往哪走whisper-web 最打动人的点，是它证明了浏览器端语音识别可以不依赖任何后端：录音、推理、展示一条龙全在本地完成，对隐私敏感的场景几乎可以直接套用，也可以当作一个干净的浏览器 ML 学习样本。二次开发的空间不小——把带时间戳的输出接到笔记工具或字幕流水线、换更大的模型、接入 LLM 做文本润色，都是顺理成章的下一步。核心链路只有 Constants、useTranscriber、worker 三站，链路短，值得顺着读一遍。【免费下载链接】whisper-webML-powered speech recognition directly in your browser项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考