# 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.

```javascript
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.

```javascript
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()`.

```javascript
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.

```javascript
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).

```javascript
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]]