Add Speech Recognition Search to Your Website

Today we are going to see about How to add speech recognition (google voice search) to your website. Nowadays most of the people are using speech recognition search engine, especially mobile phone website viewers. Try this code and implement your website. Here I have shared very simple Javascript convert voice to text. Let see the code and live demo.

Live Demo Download

Recently I have posted HTML5 web speech search API. But that API has been deprecated. That code has not supported more browsers and sometimes it doesn't work properly. I would suggest to you use this simple voice search code. It will support all Browsers.

HTML5 Web api code.

<input type="text" x-webkit-speech>

For Enable the voice recognition just add x-WebKit-speech to a text field.

New speech recognition code.

<form id="form_id" method="get" action="https://www.google.com/search">
  <div class="speech_box">
    <input type="text" name="q" id="search_box" placeholder="Speak" />
    <input name="sitesearch" type="hidden" value="www.mostlikers.com">
    <img onclick="voice_recognition()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>
  

 <script>
function voice_recognition() {  
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
     var recognition = new webkitSpeechRecognition();  
     recognition.continuous = false;
     recognition.interimResults = false;
     recognition.lang = "en-US"; //language
     recognition.start();
     recognition.onresult = function(e) {
     document.getElementById('search_box').value = e.results[0][0].transcript;
     recognition.stop();
     document.getElementById('form_id').submit(); //form submit
   };
   recognition.onerror = function(e) {
     recognition.stop(); // error msg
    } 
  }
}
</script>

Voice_recognition - On click the voice recognition icon access the script function.
recognition.lang - Search text language format.
search_box - After getting the voice convert to text send the value to search_box class input field.
recognition.onerror - It's will display the error message.

CSS

Add CSS for the text field and search box.

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

Menu Link

13 July, 2016