How To Implement Speech Recognition On your Website

How To Implement Speech Recognition On your Website

Imagine if your desktop computer’s search bar on the Google page contains a little microphone symbol. With just one click of the symbol and a spoken command, voilà! Your voice changes into searchable text. You no longer need to educate your browser to comprehend speech, as in the past. Speaking is frequently quicker than typing on a keyboard for folks who are not accustomed to touch typing.

Does that sound like wizardry? But here’s the really cool part: with a few lines of code, you can incorporate speech recognition magic into your own website. Imagine users simply speaking as they perform searches or fill out forms. The icing on the cake is that the browsers Firefox and Google Chrome both support the speech recognition API.

But let’s warm up with a live demo first before we go into the technical depths. Find the speech symbol inside the search box if you’re using Google Chrome (on a desktop or mobile device), tap it, and speak a search term. If need, allow others to use your microphone. Once you’ve finished speaking your pearls of wisdom, observe the search results page as it appears.

However, there’s still more! We’ll get things going with some visual jazz. Take note of the styling:

.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;
}
<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>

Hold on tight as we continue to delve deeper.

Add Voice Recognition to your Website:

Remember back in the day when you could simply type the attribute “x-webkit-speech” into an input field and presto, it would respond to your voice commands? Those times have passed, though. In order to channel the magic, you must now use the JavaScript API. Enjoy the sophisticated code:

<!-- Stylish Tidbits -->
<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>

<!-- A Voice-Ready 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 Magic -->
<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>

Look at the opulent CSS, the form that cries out to be spoken to, and the script that is nothing short of digital wizardry.

Imagine the JavaScript peeking out from the shadows to see if the browser is ready for voice incantations when a user dares to tap the microphone icon in the search box. If so, the script waits for the ethereal transcription to arrive from Google’s world before submitting the form with a flourish.

Oh, and don’t forget, the Dictation App even moves to the symphony of speech recognition, even though the transcribed text is carved onto a textarea rather than a simple input box.

To conclude this enchanted act, a couple of side notes:

The browser won’t repeatedly nag you for microphone rights if your HTML form or search box is embedded in an HTTPS domain.

What about the “recognition.lang” property? You can change it from “en-US” to another language (such hi-In for Hindi or fr-FR for French), depending on your preference. Think about the list of languages you have been given.

The mystical spell of speech recognition has thus been whispered through the code, endowing your website with the gift of voice. Unveil this technological marvel, watch your users be in awe, and rise to the top of the search engine leaderboard!

Leave a Comment