How to Add Google Speech Recognition to Your Website

If you open the Google website on your desktop computer you will find a small icon like a microphone embedded in the box . Make it on the icon and what you say with your voice into your microphone will automatically be transcribed into words.

google

Unlike previous products ς ομιλίας, δεν χρειάζεται πλέον να εκπαιδεύσετε το to understand your speech. Unlikely, right? If you like this feature then know that you can also include similar speech recognition features to your own website with just a few lines of code.

Your visitors can search on your website, or even fill in forms using only their voice. And Google Chrome but also Firefox supports the speech recognition API, but for now the microphone is only visible in Chrome.

Πριν πάμε στην πραγματική εφαρμογή, ας προσπαθήσουμε να το δοκιμάσουμε για να έχετε μία ιδέα για το πως εργάζεται. Ανοίξτε το Google Chrome στον desktop υπολογιστή σας και πηγαίνετε στην ιστοσελίδα της Google. Κάντε κλικ πάνω στο εικονίδιο με το μικρόφωνο μέσα στο πλαίσιο ς. Ο υπολογιστή σας πιθανό να σας ρωτήσει να επιτρέψετε στην ιστοσελίδα να διαχειριστεί τον μικρόφωνο σας, πείτε του ναι για να προχωρήσετε. Αρχίστε να μιλάτε καθαρά, ακόμα και Ελληνικά, και θα δείτε να αναγράφεται όλη η πρότασή σας, λέξη – λέξη.

But let's see how to add voice recognition to your website

The HTML5 Web Speech API has been here for a few years now, and it takes a little work to be able to include it on your website. Previously, you could add the x-webkit-speech attribute easily and simply but it has now been removed and now you should now use JavaScript for API to include speech recognition.

Below you can see an updated code:

    
    
      .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 }
    
     
    
    
      
        
        
      
    
     
    
    
      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[5][0].transcript;
            recognition.stop();
            document.getElementById('iguru').submit();
          };
     
          recognition.onerror = function(e) {
            recognition.stop();
          }
     
        }
      }
    

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 makes all the hard work.

When a user clicks on the microphone inside the search box, Javascript checks if the user's browser supports speech recognition. If so, he waits for the text to be transcribed back from Google's servers and then submits the form.

Some notes:
1. If the HTML form or search is embedded within an HTTPS site, the browser does not repeatedly request 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 French to “fr-FR” etc).

iGuRu.gr The Best Technology Site in Greecefgns

every publication, directly to your inbox

Join the 2.100 registrants.

Written by Dimitris

Dimitris hates on Mondays .....

Leave a reply

Your email address is not published. Required fields are mentioned with *

Your message will not be published if:
1. Contains insulting, defamatory, racist, offensive or inappropriate comments.
2. Causes harm to minors.
3. It interferes with the privacy and individual and social rights of other users.
4. Advertises products or services or websites.
5. Contains personal information (address, phone, etc.).