Using the Web Speech API in JavaScript

The Web Speech API enables web applications to process voice data directly in the browser through two distinct components: the Speech Recognition interface for converting spoken audio to text, and the Speech Synthesis interface for converting written text into spoken audio. This native JavaScript API eliminates the need for third-party audio processing libraries, providing a lightweight, standardized way to build voice-driven interfaces, accessibility features, and automated dictation tools.

Speech Recognition: Converting Voice to Text

Speech recognition is handled via the SpeechRecognition interface (often prefixed as webkitSpeechRecognition in Chromium-based browsers). It accesses the user’s microphone to capture audio streams, transmits the data to a recognition service (either on-device or cloud-based depending on the platform), and returns transcribed text events.

Implementation Workflow

To initialize speech recognition, create an instance of the recognition constructor and configure its properties:

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// Configuration
recognition.continuous = false; // Stop listening after one phrase
recognition.interimResults = true; // Return preliminary results while speaking
recognition.lang = 'en-US'; // Set recognition language

Event Handling

The recognition lifecycle operates through event listeners:

• onstart: Fires when the audio capture begins.
• onresult: Returns a SpeechRecognitionEvent containing a results list with transcripts and confidence scores.
• onerror: Catches capture or permission errors.
• onend: Fires when recording stops, allowing for cleanups or restarts.

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  const confidence = event.results[0][0].confidence;
  console.log(`Transcribed text: ${transcript} (Confidence: ${confidence})`);
};

// Start and stop capture
recognition.start();
// recognition.stop();

Speech recognition requires explicit microphone permissions from the user and typically requires an active HTTPS connection in production environments.

Text-to-Speech: Speech Synthesis

Speech synthesis generates synthetic speech from plain text and is accessed via the global window.speechSynthesis controller using SpeechSynthesisUtterance objects. Unlike recognition, synthesis does not require microphone access and operates locally on most devices.

Creating an Utterance

An utterance encapsulates the text to be spoken and its acoustic properties:

const message = new SpeechSynthesisUtterance("Hello, welcome to our application.");

// Adjust voice parameters
message.rate = 1.0;   // Speed: 0.1 to 10
message.pitch = 1.0;  // Pitch: 0 to 2
message.volume = 1.0; // Volume: 0 to 1
message.lang = 'en-US';

Selecting Voices

Browsers provide a list of installed system voices via speechSynthesis.getVoices(). Because voices load asynchronously, listen to the voiceschanged event to retrieve the available list before assigning a voice:

window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices();
  const selectedVoice = voices.find(voice => voice.lang === 'en-US' && voice.name.includes('Google'));
  if (selectedVoice) {
    message.voice = selectedVoice;
  }
};

Controlling Playback

Playback is managed directly through the synthesis queue:

window.speechSynthesis.speak(message); // Queue speech
// window.speechSynthesis.pause();      // Pause current audio
// window.speechSynthesis.resume();     // Resume paused audio
// window.speechSynthesis.cancel();     // Clear queue and stop speaking

Utterances also support lifecycle events such as onstart, onend, onpause, and onboundary to synchronize UI animations with spoken words.