Add Speech Recognition Search to Your Website - Mostlikers

13 July, 2016

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.

Add Speech Recognition Search to Your Website

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>









Related Topics





2 comments:

  1. I have code as instructed, but the program does not run

    ReplyDelete
    Replies
    1. I have checked live demo its working fine . Could you please check your browser console

      Delete