Integrating Real-Time AI Speech-to-Text in Web Apps: Web Audio API & Noise Suppression

Building clinical-grade speech recognition into browser applications requires solving background hospital noise, variable microphone sensitivity, and low-latency audio packet streaming.

1. The Challenge of Noisy Microphone Input

Raw microphone input captured via navigator.mediaDevices.getUserMedia() contains ambient fan noise, room reverberation, and keyboard clicks that degrade AI model transcription accuracy.

2. Web Audio API & Biquad Filter Nodes

We process audio through an AudioContext pipeline using a high-pass filter (cutoff 80Hz) to remove low-frequency rumble and a dynamics compressor node to normalize speech volume:

const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);
const filter = audioCtx.createBiquadFilter();
filter.type = 'highpass';
filter.frequency.value = 80;

source.connect(filter);
filter.connect(audioCtx.destination);

3. Streaming Audio Buffers to AI Endpoints

Audio chunks encoded as lightweight 16kHz mono PCM are streamed via WebSockets to speech-to-text transcription models, returning real-time transcription tokens within 350ms.

4. Structuring Clinical Notes with AI

A secondary LLM parsing pipeline converts unstructured transcripts into formatted SOAP notes (Subjective, Objective, Assessment, Plan) with validated prescription doses, reducing doctor manual entry time by 65%.