If you open the Google website on your desktop computer, you'll find a small microphone icon embedded in the search box. Click on the icon and whatever you say into your microphone will automatically be transcribed into words.
Unlike previous speech recognition products, you no longer need to train the browser to understand your speech. Amazing, right? If you like this feature, then know that you can also include similar speech recognition capabilities with your own website with just a few lines of code.
Your visitors can search your website, or even fill out forms, using just their voice. Both Google Chrome and Firefox support the speech recognition API, but currently the microphone is only visible in Chrome.
Before we get to the actual application, let's try it out to get an idea of how it works. Open Google Chrome on your desktop computer and go to the Google website. Click on the microphone icon in the search box. Your computer may ask you to allow the website to manage your microphone, say yes to proceed. Start speaking clearly, even in Greek, and you will see your entire sentence written out, word by word.
But let's see how to add voice recognition to your website
The HTML5 Web Speech API has been around for a few years now, and it takes a bit of work to get it to work on your website. Previously, you could easily add the x-webkit-speech attribute, but it has been deprecated and you now have to use JavaScript for the API to include speech recognition.
Below you can see an updated code:
<!-- 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="iguru" 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('iguru').submit(); }; recognition.onerror = function(e) { recognition.stop(); } } } </script>Here we have the CSS to place the microphone image inside the input box, the code that contains the input form, and finally the JavaScript that does all the heavy lifting.
When the user clicks on the microphone in the search box, Javascript checks if the user's browser supports speech recognition. If so, it waits for the text to be transcribed back from Google's servers and then submits it to the form.
Some notes:
1. If the HTML form or search is embedded within an HTTPS website, the browser will not repeatedly ask for permission to use the microphone.
2. You can change the value of recognition.lang from “en-US” to another language (such as Greek to “el-GR” or for French to “fr-FR” etc.).
