If you open the Google website on your desktop computer you will find a small icon like a microphone embedded in the box search. Make it click on the icon and what you say with your voice into your microphone will automatically be transcribed into words.
Unlike previous products recognitionς ομιλίας, δεν χρειάζεται πλέον να εκπαιδεύσετε το Browser 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. Κάντε κλικ πάνω στο εικονίδιο με το μικρόφωνο μέσα στο πλαίσιο searchς. Ο υπολογιστή σας πιθανό να σας ρωτήσει να επιτρέψετε στην ιστοσελίδα να διαχειριστεί τον μικρόφωνο σας, πείτε του ναι για να προχωρήσετε. Αρχίστε να μιλάτε καθαρά, ακόμα και Ελληνικά, και θα δείτε να αναγράφεται όλη η πρότασή σας, λέξη – λέξη.
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).