How to Add Voice Recognition to your Website/Blog

So,Do you want to  Add Voice Recognition to your Website/Blog. Just Like in your Mobile Phones When you Say "Hello Google" then voice Mode will be activated Just Like the Same way you could add to your websites or blogs also by Using the below technique

Steps to How to Add Voice Recognition to your Website/Blog

The HTML5 Web Speech API has been around for several years, but it takes a little more work now include it on your site.

Earlier, you can add an attribute for any form of x-WebKit speech input field, and it has become a voice capable. The X-WebKit- speech has the capacity, but is outdated, and you are now required to use the JavaScript API include speech recognition. Here is the updated code.

<!-- 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 need to put a microphone image within the input box in CSS, and JavaScript code containing the entry form button, that does all the hard work.

 When the user click on the picture of the microphone inside the search box, then JavaScript- is checked, if the user's browser supports speech recognition. If so, then it is waiting for a rewrite of the text and then submit the form to arrive from Google servers.

 Dictation App also uses speech recognition API although it's transcribed text Textarea field instead of input box. some notes If the HTML form / HTTPS website embedded inside the search box, browser has repeatedly asked permission to use the microphone.

You can change the property value recognition.lang 'en-US' another language (as in for hi- Hindi or fr-FR for Français): See full list of supported languages.