Project 03, AI in the browser
Speech to Text Notes
Press record, talk, and get a written note. Whisper runs inside this page, so your voice is never sent to a server.
- Runs on
- Your CPU (WebAssembly)
- Model
- Whisper tiny
- First download
- About 40 to 75 MB
- Your browser
- Checking
Record a note
The model downloads the first time you transcribe.
0:00
Ready to record
Your notes
No notes yet
How it works
- RecordMediaRecorder captures your microphone while an AnalyserNode drives the level meter.
- ResampleThe recording is decoded with the Web Audio API at 16 kHz, the rate Whisper expects.
- TranscribeWhisper turns the audio into text in 30 second chunks, then the note is saved locally.
import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
const transcribe = await pipeline("automatic-speech-recognition", "Xenova/whisper-tiny.en");
// Whisper needs mono audio at 16 kHz as a Float32Array
const ctx = new AudioContext({ sampleRate: 16000 });
const buffer = await ctx.decodeAudioData(await blob.arrayBuffer());
const audio = buffer.getChannelData(0);
const { text } = await transcribe(audio, { chunk_length_s: 30, stride_length_s: 5 });
console.log(text);