Sling Academy
Home/JavaScript/Recognize Speech with the Web Speech API in JavaScript

Recognize Speech with the Web Speech API in JavaScript

Last updated: December 14, 2024

The Web Speech API allows developers to incorporate voice data into web applications, revolutionizing how users can interact with services. By implementing speech recognition, developers can enhance user experience by allowing input through voice commands.

The API essentially consists of two main interfaces: SpeechRecognition for recognizing speech and SpeechSynthesis for converting text to speech, but our focus here is the recognition aspect.

Getting Started with SpeechRecognition

In JavaScript, to leverage the Web Speech API, you primarily work with the SpeechRecognition interface. To use it, you need to check for browser compatibility and create an instance of the SpeechRecognition object.

if (!('webkitSpeechRecognition' in window)) {
  console.log('Web Speech API is not supported by your browser. Please upgrade to a more recent version.');
} else {
  const recognition = new webkitSpeechRecognition();
}

Note that webkitSpeechRecognition is an experimental API and may not work the same way in all browsers.

Configuring SpeechRecognition

Once the instance is created, you can start configuring it. Some of the properties you can set include:

  • recognition.lang: defines the language of the recognition. E.g., 'en-US' for English.
  • recognition.interimResults: a boolean that specifies if interim results should be returned.
  • recognition.maxAlternatives: sets the number of alternative recognized results to return.

Here is an example to set these properties:

recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

Handling SpeechRecognition Events

Several events are emitted during the lifecycle of speech recognition. Some of the key events include:

  • start: triggered when the speech recognition service starts.
  • end: triggered when the speech recognition stops.
  • result: returns the results when speech is recognized.

Handling these events is important for effectively managing speech recognition in your application:

recognition.onstart = function() {
  console.log('Speech recognition service has started');
};

recognition.onend = function() {
  console.log('Speech recognition service disconnected');
};

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('Result received: ' + transcript);
};

Triggering SpeechRecognition

Finally, to start or stop the speech recognition, you simply invoke the start() and stop() methods on the recognition instance:

recognition.start();
// Perform operations, and when done
recognition.stop();

Starting the recognition will prompt the user to allow access to the microphone, so make sure your application's privacy policy covers audio recording permissions.

Conclusion

The Web Speech API offers a straightforward yet powerful way to perform speech recognition in web applications. While currently limited by browser support, it provides a glimpse into the future of human-computer interaction. As you further explore the API, consider the Web Speech API specification for a comprehensive understanding of other parameters and capabilities.

Experiment and test your application in different environments to ensure a seamless experience for users. From accessing real-time recognition results to managing various languages, the potential is vast. Start incorporating speech recognition in your applications and anticipate harnessing the full potential of voice-driven web apps.

Next Article: Convert Spoken Words to Text Using JavaScript Web Speech

Previous Article: Boost Engagement by Using Web Share in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration