The Pipe Platform Achieves Security and Compliance Milestone with SOC 2 Type I Attestation. Learn More

Web Speech API Speech Recognition Demo

This demo uses getUserMedia() and the Web Speech API’s SpeechRecognition interface to turn live speech into captions. It exercises the continuous, interimResults, lang, maxAlternatives and (where supported) processLocally properties, and logs every event and error the API emits.

How to use

  1. Grant microphone (and camera, if enabled) permissions.
  2. Safari on macOS: when prompted, allow OS level Speech Recognition access. You can change this later from System Settings. In some cases you may also need to enable Siri or Dictation.
  3. Pick a language. English (United States) is the default.
  4. Press Record and speak in the selected language.
  5. Press Stop, then download the caption files.

Features

  • Real-time interim and final captions while recording
  • Multi-language recognition, per-phrase timings and confidence scores
  • .vtt, .srt, .json and .txt exports
  • Generated subtitle track applied to the recorded video on playback
  • Live input level meter, so a silent mic is obvious right away
  • Full event & error log of everything the recognition engine reports
  • On-device (offline) recognition and phrase biasing where the browser supports them

Environment & support

Capture settings

Device labels only appear after microphone access is granted.

Recorder

Audio-only capture — no camera in use.

Idle

Input level

  • Elapsed
    00:00
  • Phrases
    0
  • Words
    0
  • Avg. confidence
    —
  • Auto-restarts
    0
  • Errors
    0

Transcript

Nothing yet — press Record and start talking.

Raw transcription object
{}

Event & error log

No events yet.

Every SpeechRecognition lifecycle event, MediaRecorder state change, permission failure and uncaught page error is recorded here with the elapsed time since page load. Enable Debug for the noisy per-audio-frame events.

Works on

  • Chrome 33+ (on-device recognition from Chrome 139)
  • Edge 79+
  • Safari 14.1+ on macOS
  • Safari on iOS 14.5+
  • Opera 123+

Known issues

  • Firefox does not support SpeechRecognition yet
  • There is no official list of supported languages. The specification does not define one and no browser publishes one, so the language dropdown above cannot be authoritative. Ours is assembled from Google's Chrome speech demo and the on-device speech recognition explainer. So some entries will not work in every browser. When that happens you will see a language-not-supported error in the log
  • Getting it to work offline is gimmicky. Chrome 139 allows it
  • It takes a few extra seconds for the API to figure out when a non-English sentence ends
  • Chrome ends a recognition session on its own after a stretch of silence even with continuous = true; this demo restarts it automatically and counts the restarts above
  • Result timings come from the page clock, not the audio stream — the API exposes no per-word timestamps, so caption cues are approximate
  • In cloud mode (Chrome/Edge default) audio is sent to a remote service for transcription

RELATED RESOURCES