How to Add Speech Recognition into Your Website

If you open the Google website on your desktop computer, you’ll notice a small microphone icon inside the search box. By clicking on the icon and speaking, your voice is instantly transcribed into text. Unlike previous speech recognition systems, there’s no need to train the browser to understand your voice. For those who aren’t proficient with touch typing, speaking is often a quicker method of input than typing.

It might seem like magic, but did you know that you can add similar speech recognition features to your own website with just a few lines of code? This allows visitors to search your site or even fill out forms using their voice. Both Google Chrome and Firefox browsers support the speech recognition API.

Before we dive into the implementation, let’s try a working demo. If you’re viewing this page in Google Chrome (on either desktop or mobile), click the voice icon in the search box and speak a query. You may need to grant the browser access to your microphone. Once you’re done speaking, the search results will appear automatically.

<style>
  .speech {
    border: 1px solid #ddd;
    width: 300px;
    padding: 0;
    margin: 0;
  }

  .speech input {
    border: 0;
    width: 240px;
    display: inline-block;
    height: 30px;
    font-size: 14px;
  }

  .speech img {
    float: right;
    width: 40px;
  }
</style>

<form id="labnol" method="get" action="http://www.labnol.org">
  <div class="speech">
    <input type="text" name="s" id="transcript" placeholder="Say Something" />
    <img onclick="startDictation()" src="https://i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('transcript').value = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };
      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>

Add Voice Recognition to Your Website
The HTML5 Web Speech API has been available for several years, but integrating it into your website now requires a bit more effort.

In the past, you could simply add the x-webkit-speech attribute to any form input field to enable voice functionality. However, this attribute has been deprecated, and you now need to use the JavaScript API for speech recognition. Below is the updated code for implementation:

<!-- CSS Styles -->
<style>
  .speech {
    border: 1px solid #ddd;
    width: 300px;
    padding: 0;
    margin: 0;
  }
  .speech input {
    border: 0;
    width: 240px;
    display: inline-block;
    height: 30px;
  }
  .speech img {
    float: right;
    width: 40px;
  }
</style>

<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = 'en-US';
      recognition.start();

      recognition.onresult = function (e) {
        document.getElementById('transcript').value = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function (e) {
        recognition.stop();
      };
    }
  }
</script>

We have the CSS to position the microphone image inside the input box, the HTML form with the input field and button, and the JavaScript that handles the main functionality.

When the user clicks the microphone icon inside the search box, the JavaScript checks if the browser supports speech recognition. If it does, the script waits for the transcribed text to be received from Google’s servers and then submits the form.

The Dictation App also utilizes the speech recognition API, but instead of placing the transcribed text in an input box, it writes it to a textarea field.

A few important notes:

• If the HTML form or search box is embedded in an HTTPS website, the browser will not repeatedly ask for permission to access the microphone.
• You can modify the recognition.lang property to change the language (for example, ‘hi-IN’ for Hindi or ‘fr-FR’ for French). You can find a complete list of supported languages.