How to Use Speech Recognition in Website

Are you bored of typing, searching google with different keyword and phrases will make you lazy? Do you want to live to hand free life for Googling then this tutorial will change your lifestyle with Google? In How to Use Speech Recognition in Website tutorial you will learn how to convert your website customize search engine with speech recognition and how to use Google search with the same feature.

How to use Speech recognition in Google

Open your Google homepage, generally, Google redirects user to their country version of google. Now just after the search box where you use to type text, you will find the Microphone icon. Click on Google microphone icon, it will trigger browser notification for the permission of using your default microphone for Google website. So if you allowed once then it will not ask for same permission next time. After that use your microphone to speak, keep in mind to use this feature in the noiseless area as noise may affect your microphone quality to record voice clearly.

Now we will learn how to add the same feature on your own website, which will give a relief to the website visitors.

Add Voice Recognition to your Website

For this you have to be a coder, let’s take an example of WordPress website. So let’s start with implementing google speech recognition for the website.

Go to WordPress dashboard and then navigate as follows Appearance –  Widget – Add Text  or Html Widget ( generally search box is put in the sidebar of the website.)

Now Add search engine box coding which as follows,

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

Ok, if you want to make this search engine box fancy then you can add CSS code for it, which is as follows.

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

Click on save. And you can see the output in your website, But it will not work as we are not yet completed. So final shoot is to add API coded in JavaScript using HTML5 which is given below. You can add this script in header.php file or body of your website, better will be in the footer.

<script>
  function startFinding() {
 
    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('buzzmycode').submit();
      };
 
      recognition.onerror = function(e) {
        recognition.stop();
      }
 
    }
  }
</script>

Hope you enjoy adding speech recognition to your website. Share with developers to make their website more trending.