NPM 库可在浏览器中完全转录音频和视频,使用 WebGPU 和 WebCodecs。使用 WASM 备份,100% 私密且离线。
NPM 库可在浏览器中完全转录音频和视频,使用 WebGPU 和 WebCodecs。使用 WASM 备份,100% 私密且离线。
Transcribe audio and video in the browser with Whisper — fully local, no backend, no API keys.
browser-whisper is a TypeScript library that turns files (or microphone audio) into text using Whisper, entirely in the user’s browser.
AudioContext fallback when neededAudio never leaves the device. You do not need an OpenAI API key.
npm install browser-whisper
bun add browser-whisper
No peer dependencies — mediabunny and @huggingface/transformers are used inside the library’s workers.
import { BrowserWhisper } from 'browser-whisper'
const whisper = new BrowserWhisper({ model: 'whisper-base' })
const file = document.querySelector('input[type=file]').files[0]
for await (const { text, start, end } of whisper.transcribe(file)) {
console.log(`[${start.toFixed(1)}s – ${end.toFixed(1)}s] ${text}`)
}
Collect all segments:
const segments = await whisper.transcribe(file).collect()
Mono 16 kHz Float32Array (e.g. from a VAD):
const segments = await whisper.transcribePCM(samples).collect()
Threaded WASM needs cross-origin isolation on the page that loads the library:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
For Vite, set those on server and preview. For Next.js, set them in next.config and import the library only on the client.
Full setup (Vite, Next.js, deploy) is in the documentation.
const whisper = new BrowserWhisper({
model: 'whisper-small',
language: 'en', // optional — omit for auto-detect
})
Use a *_timestamped model (e.g. whisper-base_timestamped) for word-level timestamps. See the live demo.
whisper.transcribe(file, {
onSegment: (seg) => renderLine(seg),
onProgress: ({ stage, progress }) => {
// stage: 'loading' | 'decoding' | 'transcribing'
updateBar(progress) // 0 – 1
},
})
await whisper.downloadModel({
model: 'whisper-small',
onProgress: ({ stage, progress }) => updateBar(progress),
})
Supports AbortSignal. Example: OPFS cache demo.
await BrowserWhisper.clearCache()
await BrowserWhisper.deleteModel('whisper-tiny')
Default: whisper-base. Hybrid quantization (encoder fp32 + decoder q4). Weights from Hugging Face (onnx-community), cached in the browser after first use.
| Model | Download (approx.) | Notes |
|---|---|---|
whisper-tiny |
~64 MB | Fastest |
whisper-base |
~136 MB | Default |
whisper-small |
~510 MB | Better accuracy |
whisper-large-v3-turbo |
~2.7 GB | Strongest Whisper option |
moonshine-tiny / moonshine-base |
~32–61 MB | English only |
distil-whisper-small |
~185 MB | English only |
Timestamped, lite, and large-v3 variants are supported too. Full list: docs — Models.
Your file
→ Decoder worker (mediabunny + WebCodecs → 16 kHz mono chunks)
→ Whisper worker (Transformers.js + ONNX on WebGPU)
→ Main thread (async iterator / callbacks)
The decoder and model loader start together. Chunks that arrive before the model is ready are queued and processed in order.
| Chrome | Firefox | Safari | |
|---|---|---|---|
| WebGPU | 113+ | 141+ | 18+ |
| WebCodecs | 94+ | 130+ | 16.4+ |
Missing features fall back automatically. First run needs network for WASM (~1 MB) and model weights; after caching, transcription can work offline.
| Documentation | Install, headers, API, all models |
| Live demo | Upload and transcribe in the browser |
| Examples | OPFS cache, live mic + VAD |
| Vite example | Minimal Vite app |
| Next.js example | App Router, client-only |
API types (TranscriptSegment, errors, QuantizationType, …): docs — API or dist/index.d.ts after install.
git clone https://github.com/tanpreetjolly/browser-whisper.git
cd browser-whisper
bun install
bun run dev:site
bun run typecheck
bun run build
Issues and PRs welcome on GitHub.
暂无开放 Issues，或尚未同步最近议题。