How to Add Voice Recognition to your website through HTML Coding

Open google official site on your desktop/pc & you'll find a microphone icon there on the right side of the google search bar. Click on the icon & say anything you want to search & your voice quickly change into words. Today speech mode of input text is faster than the keyboard typing. This is not the earlier type speech regonition tool, you have no need to tell again & again to understand your speech. Its very fast & responsive.

Sounds like amazing!! right? But this is a google website you have opened right now, how you feel if this speech reconition tool added to your website? Is it possible? Yes!! it is you need a few lines of coding to adding speech recognition tool on your website. Visitors who will visit to your website, can search through voice reconition tool or even fill forms by using their voice. Its just like magic. Google Chrome & Mozilla Firefox both browser supports API of the speech recognition tool.

Before we go ahead, let's try a demo of this speech recoginition tool. Is it working properly or not? If your are viewing the homepage of google website(you can open anywhere on desktp, tab, mobile), click the voice icon right side of the search bar & say something what you want to search. When you finished speaking, the search result page of that query you have searched, open automatically.

Add Voice Recognition To Your Website

HTML5 Web Speech API has been for some years now, but to include it in your website, now it takes a little more work.

Before this, we could add the attribute of HTML 5 x-webkit-speech to become voice capable webpage to any form input field. But technology changed, now you can add speech recognition tool with the use of javascript API.  Here's the javascript code below to add speech recognition:

<!-- 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 have CSS to add the microphone image in the input field, the code of the form containing the input button & javascript code containing all the heavy work.

When user click on the microphone icone which is placed inside the search box, the javascript checks the browser of the user's supports speech reconition. It waits for the written record of the text comes from the google webserver & then submits the form.

Notes:-

If you use HTTPS website and HTML form or search box is embedded in it, the browser of user not ask every time for permission to use microphone. You have an option to use another language in speech recognition, you need to change the value of recognition.lang property from "en-US" to any language like hi-In for Hindi fr-FR for Francais. see the complete list below of the supported languages.

<option value="af-ZA">Afrikaans</option>
        <option value="id-ID">Bahasa Indonesia</option>
        <option value="ms-MY">Bahasa Melayu</option>
        <option value="ca-ES">Català </option>
        <option value="cs-CZ">ÄŒeÅ¡tina</option>
        <option value="da-DK">Dansk</option>
        <option value="de-DE">Deutsch</option>
        <optgroup label="English">
          <option value="en-AU">Australia</option>
          <option value="en-CA">Canada</option>
          <option value="en-IN">India</option>
          <option value="en-NZ">New Zealand</option>
          <option value="en-ZA">South Africa</option>
          <option value="en-GB">United Kingdom</option>
          <option value="en-US" selected="">United States</option>
        </optgroup>
        <optgroup label="Español">
          <option value="es-AR">Argentina</option>
          <option value="es-BO">Bolivia</option>
          <option value="es-CL">Chile</option>
          <option value="es-CO">Colombia</option>
          <option value="es-CR">Costa Rica</option>
          <option value="es-EC">Ecuador</option>
          <option value="es-SV">El Salvador</option>
          <option value="es-ES">España</option>
          <option value="es-US">Estados Unidos</option>
          <option value="es-GT">Guatemala</option>
          <option value="es-HN">Honduras</option>
          <option value="es-MX">México</option>
          <option value="es-NI">Nicaragua</option>
          <option value="es-PA">Panamá</option>
          <option value="es-PY">Paraguay</option>
          <option value="es-PE">Perú</option>
          <option value="es-PR">Puerto Rico</option>
          <option value="es-DO">República Dominicana</option>
          <option value="es-UY">Uruguay</option>
          <option value="es-VE">Venezuela</option>
        </optgroup>
        <option value="eu-ES">Euskara</option>
        <option value="fil-PH">Filipino</option>
        <option value="fr-FR">Français</option>
        <option value="gl-ES">Galego</option>
        <option value="hi-IN">हिन्दी</option>
        <option value="hr_HR">Hrvatski</option>
        <option value="zu-ZA">IsiZulu</option>
        <option value="is-IS">Íslenska</option>
        <optgroup label="Italiano">
          <option value="it-IT">Italia</option>
          <option value="it-CH">Svizzera</option>
        </optgroup>
        <option value="lt-LT">Lietuvių</option>
        <option value="hu-HU">Magyar</option>
        <option value="nl-NL">Nederlands</option>
        <option value="nb-NO">Norsk bokmÃ¥l</option>
        <option value="pl-PL">Polski</option>
        <optgroup label="Português">
          <option value="pt-BR">Brasil</option>
          <option value="pt-PT">Portugal</option>
        </optgroup>
        <option value="ro-RO">Română</option>
        <option value="sl-SI">Slovenščina</option>
        <option value="sk-SK">Slovenčina</option>
        <option value="fi-FI">Suomi</option>
        <option value="sv-SE">Svenska</option>
        <option value="vi-VN">Tiếng Việt</option>
        <option value="th-TH">ภาษาไทย</option>
        <option value="tr-TR">Türkçe</option>
        <option value="el-GR">Ελληνικά</option>
        <option value="bg-BG">български</option>
        <option value="ru-RU">Pусский</option>
        <option value="sr-RS">Српски</option>
        <option value="uk-UA">Українська</option>
        <option value="ko-KR">한국어</option>
        <optgroup label="中文">
          <option value="cmn-Hans-CN">普通话 (中国大陆)</option>
          <option value="cmn-Hans-HK">普通话 (香港)</option>
          <option value="cmn-Hant-TW">中文 (台灣)</option>
          <option value="yue-Hant-HK">粵語 (香港)</option>
        </optgroup>
        <option value="ja-JP">日本語</option>