Speech to Text HTML CSS JS — Web Speech API

Speech to text turns the microphone into a live transcriber: you talk, and words appear on screen in real time. This component is built entirely in the browser with the Web Speech API — specifically the SpeechRecognition interface — with no server, no cloud key and no library. It supports continuous dictation, shows tentative interim words before they are confirmed, switches between languages, and degrades gracefully where the API is unavailable. Here is exactly how it is constructed.

Accessing the recognition engine

The entry point is the SpeechRecognition constructor, which in Chromium-based browsers is exposed as webkitSpeechRecognition. The code resolves it with a fallback: const SR = window.SpeechRecognition || window.webkitSpeechRecognition. If neither exists — as in browsers without speech support — the script shows a friendly unsupported message and disables the controls instead of throwing. This feature-detection-first approach is essential because Web Speech support is uneven across browsers.

Once available, a recognition instance is created and configured with three key flags. recognition.continuous = true keeps it listening across pauses rather than stopping after the first phrase. recognition.interimResults = true makes the engine emit provisional, not-yet-final guesses as you speak. recognition.lang is set from the language selector so the acoustic and language models match the spoken language.

Separating interim and final results

The heart of the transcriber is the onresult event. Its event object carries a results list, where each entry has an isFinal flag and one or more alternatives with a transcript string. The handler loops from event.resultIndex to the end of the list and splits the output into two buckets: when isFinal is true the text is appended to a persistent finalTranscript string, and when it is false the text is collected into a temporary interim string for that frame.

This separation is what produces the familiar live-typing feel. Final text is rendered solidly and never changes; interim text is shown in a lighter, italic style and is replaced on every event as the engine refines its guess. Because interim results are reissued continuously, the interim element is fully rewritten each time rather than appended, while the final element only ever grows.

Keeping the session alive

Browsers automatically stop recognition after a period of silence and fire the onend event. To provide truly continuous dictation, the handler restarts recognition whenever it ends but the user has not pressed stop. A listening flag tracks intent: if the user still wants to listen, onend calls recognition.start() again; if they pressed stop, it simply updates the UI. This restart loop works around the engine's built-in timeouts so long-form dictation does not silently die.

Handling errors

The onerror event reports a coded error string, and the component handles the common ones explicitly. not-allowed and service-not-allowed mean the user blocked microphone permission, so it shows a permission prompt and stops trying. no-speech fires when nothing was heard; it is non-fatal and recognition can continue or restart. network indicates the speech service could not be reached. aborted occurs on a deliberate stop. Mapping these codes to clear messages prevents the confusing silent failures that plague naive implementations.

Language selection

A select element is populated with several language-locale codes (for example en-US, es-ES, fr-FR, de-DE, hi-IN). Changing it updates recognition.lang; if recognition is currently running it is restarted so the new language model takes effect immediately. Locale codes matter — en-US and en-GB bias toward different vocabularies and accents — so exposing them gives noticeably better accuracy than a bare language name.

The waveform and UI feedback

While listening, a small CSS keyframe animation drives three bars that scale vertically out of phase, mimicking a sound-level meter. The animation is purely cosmetic — it is toggled with a class when listening starts and stops — but it reassures the user that the mic is active. A live word and character count is computed from the combined final transcript, and Copy and Clear buttons let the user grab or reset the text. Copy uses navigator.clipboard.writeText with a brief confirmation label.

Why it is robust

The combination of feature detection, the interim-versus-final split keyed on resultIndex and isFinal, an onend restart loop guarded by an intent flag, and explicit error-code handling is what separates a toy demo from a usable transcriber. Everything runs locally in the browser using only the Web Speech API, so there is nothing to deploy and no audio leaves the device except to the browser's own speech service.