How to add speech recognition to your website

Speech recognition concept, today, is no novelty. Simply visit and you’ll witness a grey colored microphone icon sitting right up there in the search box. On clicking that icon, and saying something (given that you are microphone-enabled) your voice in no time will be transcribed into words ready to be searched on the world’s largest search engine.

Moreover, the technology has gone a step ahead and now you no longer need to train your web browser to understand your style of voice and dialect. Voice recognition has gone way more pleasant to become a joie de vivre for those who’re not much comfortable with touch typing.

For them speech is by far the best way to search the web. Speech means sound and we all know how briskly it travels. But now, do you really have a clue that the same voice or speech recognition functionality can be implemented on your personal website or blog to facilitate your users with a faster, better way to search your website for the information the sough after. And all this can be done with just a few lines of JS code.

Speech Recognition to your Website

This will give your audience immense power, not only to search freely but also to fill out forms with their voice. Isn’t it awesome? It has been made possible by Chrome and Firefox as the two leading browsers use the same API for speech recognition. Now before we actually go on to practically implement speech recognition to your website, let us go through a small demo.

If you’re on this webpage through Chrome (mobile or desktop) click the microphone icon in the search bar and say a query you wish to search for. Note that, depending upon your settings, your browser may seek your consent to access your microphone. The search results will be populated automatically one you’re finished saying.

Here’s how to add voice recognition to your website:

It has been years since the HTML 5 speech recognition API was released. However, in this day and age it needs a touch more than that to get going.

Earlier you had the comfort of adding attribute x-webkit-speech to any form field to make it capable for voice recognition. But now, since the x-webkit-speech API has been deprecated you now need to add a JavaScript API to make any form field capable of voice recognition.

The microphone image can be placed inside the box using a simple CSS, a JavaScript and input buttons that make a form code, the real soul behind voice recognition functionality working on any website.

Use the code given below:

  1. <!– CSS Styles –>
  2. <style>
  3. .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  4. .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  5. .speech img {float: right; width: 40px }
  6. </style>
  7. <!– Search Form –>
  8. <form id=”GeekerMagazine” method=”get” action=””>
  9. <div class=”speech”>
  10. <input type=”text” name=”q” id=”transcript” placeholder=”Speak” />
  11. <img onclick=”startDictation()” src=”//” />
  12. </div>
  13. </form>
  14. <!– HTML5 Speech Recognition API –>
  15. <script>
  16. function startDictation() {
  17. if (window.hasOwnProperty(‘webkitSpeechRecognition’)) {
  18. var recognition = new webkitSpeechRecognition();
  19. continuous = false;
  20. interimResults = false;
  21. lang = “en-US”;
  22. start();
  23. onresult = function(e) {
  24. getElementById(‘transcript’).value
  25. = e.results[0][0].transcript;
  26. stop();
  27. getElementById(‘GeekerMagazine’).submit();
  28. };
  29. onerror = function(e) {
  30. stop();
  31. }
  32. }
  33. }
  34. </script>

On clicking the mic icon available within the search box, the JavaScript runs an assessment to gauge whether or not the user’s web browser supports voice recognition. If voice recognition is supported by the browser the JavaScript waits for the transcribed text data to arrive from Google server and then it fills out the form for that particular user query.

The same voice recognition API is deployed by a dictionary app, through which it writes the transcribed text to transcribed text fields instead of an input box. Go ahead, try it out yourself, and feel free to shoot your comments in the space provided below.