Web Speech API (Speech Recognition)

The Web Speech API consists of two parts: Speech Synthesis (Text-to-Speech) and Speech Recognition (Speech-to-Text). This note focuses on Speech Recognition, which allows the browser to recognize voice input from an audio source (usually the microphone) and convert it to text.

1. The `SpeechRecognition` Interface

The entry point is the SpeechRecognition interface. Since browser support varies, you often need to handle vendor prefixes.

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (SpeechRecognition) {
  const recognition = new SpeechRecognition();
  // ... configure and use ...
} else {
  console.log("Speech Recognition is not supported in this browser.");
}

2. Configuration

You can configure how the recognition behaves.

continuous: If true, the recognition continues even after the user pauses while speaking. If false (default), it stops after the first result.
interimResults: If true, the API returns partial results (words as they are spoken) before the final result.
lang: The language of the speech (e.g., 'en-US', 'fr-FR'). Defaults to the HTML document's language.

const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

3. Basic Usage

To start listening, call start(). To stop, call stop().

const startBtn = document.getElementById('start-btn');
const output = document.getElementById('output');

startBtn.addEventListener('click', () => {
  recognition.start();
  console.log('Listening...');
});

recognition.onresult = (event) => {
  // The event contains a list of results
  const transcript = event.results[0][0].transcript;
  output.textContent = transcript;
  console.log('Result:', transcript);
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log('Stopped listening.');
};

4. Handling Results

The result event object is complex because it supports multiple alternatives and continuous results.

recognition.onresult = (event) => {
  let finalTranscript = '';
  let interimTranscript = '';

  for (let i = event.resultIndex; i < event.results.length; ++i) {
    const transcript = event.results[i][0].transcript;

    if (event.results[i].isFinal) {
      finalTranscript += transcript;
    } else {
      interimTranscript += transcript;
    }
  }

  console.log('Final:', finalTranscript);
  console.log('Interim:', interimTranscript);
};

5. Handling Errors

It is important to handle errors (e.g., microphone permission denied, no speech detected).

recognition.onerror = (event) => {
  console.error('Speech recognition error detected: ' + event.error);
};

6. Browser Support

Support is primarily in Chrome (desktop and Android) and Safari. Firefox and Edge have limited or no support for the Recognition part of the API without flags. Chrome uses a cloud-based recognition engine (sending audio to Google servers), while other implementations might be on-device.

programming/javascript/vanilla/javascript programming/javascript/vanilla/events programming/javascript/vanilla/speech-synthesis-api

Created: March 17, 2026 • Last Modified: February 1, 2026

Docs Login