demo · v135

Processed audio transcription

The SpeechRecognition.start(track) overload lets you feed any audio MediaStreamTrack into the recognizer, including one created by Web Audio. This demo routes mic audio through a BiquadFilterNode and feeds the processed output into speech recognition while displaying raw and processed levels side-by-side.

SpeechRecognition: ? start(track): ?
getUserMedia
→
MediaStreamDestination
→
SpeechRecognition

Audio levels

Raw mic
Filtered
Filter settings (active in filtered mode)

Live transcript

—

how it works

// 1. Capture mic
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const micTrack = stream.getAudioTracks()[0];
const ctx = new AudioContext();

// 2. Build the filter chain
const src    = ctx.createMediaStreamSource(new MediaStream([micTrack]));
const filter = ctx.createBiquadFilter();
filter.type      = 'highpass';
filter.frequency.value = 800;  // strip sub-800 Hz rumble
const dest   = ctx.createMediaStreamDestination();
src.connect(filter);
filter.connect(dest);

// 3. Feed the processed track into SpeechRecognition
const rec = new SpeechRecognition();
rec.continuous = true;
rec.interimResults = true;
rec.start(dest.stream.getAudioTracks()[0]); // Chrome 135+

see also