How to Add Voice Search in Websites

Integrating voice Search with HTML5 speech input fields in your website can be very useful to your users. To add this wonderful feature just drop x-webkit-speech in your input field tag, that's it! You are ready to talk. Not many browsers support this feature, but if you are using Google Chromo 11 or newer, you should see a mic icon displayed inside text input field below (other unsupported browsers just ignore it). Click on icon and speak anything, I must admit it's not 100% accurate, but it is effective.

Note:

As of Feb 2014, x-webkit-speech input field attribute no longer works, because it's deprecated and should switch to the JavaScript API instead. For more info : https://codereview.chromium.org/163103002/
Drop x-webkit-speech within your input tag like this :
HTML
  • 1
<input type="text" placeholder="speak something" x-webkit-speech />

Submit Form on Change

You may also want to automatically submit a form after speech input :
HTML
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
<script type="text/javascript"> function searchthis() { //$('#myform').submit(); //jQuery document.getElementById("myform").submit(); //normal javascript } </script> <form id="myform" method="get"> <input type="text" x-webkit-speech onwebkitspeechchange="searchthis()"> </form>
  • google is working grt on making user's life easy as possible ... voice search is one of those grt jobs they are seeing future in and working on. i have tried it and implemented it on my site for quick voice search in www.vasaivirarproperty.in and its working great . i haved used html5 and ya it still supports only chrome browser as it fetched from google server.
New question is currently disabled!