Add Speech Recognition Search to Your Website - Mostlikers

13 July, 2016

Add Speech Recognition Search to Your Website

Today we are going to discuses about How to add speech recognition (google voice search) to your website. Nowadays most of 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 support more browsers and sometime it's doesn't work properly. So 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 text field.

 New speech recognition code.

<form id="form_id" method="get" action="">
  <div class="speech_box">
    <input type="text" name="q" id="search_box" placeholder="Speak" />
    <input name="sitesearch" type="hidden" value="">
    <img onclick="voice_recognition()" src="//" />

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

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


Add css for text field and search box.
    .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;  }

Related Topics


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

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