Αν ανοίξετε την ιστοσελίδα της Google στον επιτραπέζιο υπολογιστή σας θα βρείτε ένα μικρό εικονίδιο σαν μικρόφωνο ενσωματωμένο μέσα στο πλαίσιο αναζήτησης. Κάντε κλικ στο εικονίδιο και ότι λέτε με την φωνή σας στο μικρόφωνο σας αυτό αυτόματα θα μεταγράφεται σε λέξεις.
Σε αντίθεση με τα προηγούμενα προϊόντα αναγνώρισης ομιλίας, δεν χρειάζεται πλέον να εκπαιδεύσετε το πρόγραμμα περιήγησης για να κατανοήσει την ομιλία σας. Απίθανο, έτσι? Αν σας αρέσει αυτό το χαρακτηριστικό τότε μάθετε ότι μπορείτε επίσης να περιλάβετε παρόμοιες δυνατότητες αναγνώρισης ομιλίας με τη δική σας ιστοσελίδα με λίγες μόνο γραμμές κώδικα.
Οι επισκέπτες σας μπορούν να αναζητήσουν στην ιστοσελίδα σας, ή ακόμα και να συμπληρώσουν φόρμες, χρησιμοποιώντας μόνο τη φωνή τους. Και το Google Chrome αλλά και το Firefox υποστηρίζουν το API αναγνώρισης ομιλίας, αλλά προς το παρόν το μικρόφωνο είναι ορατό μόνο στο Chrome.
Πριν πάμε στην πραγματική εφαρμογή, ας προσπαθήσουμε να το δοκιμάσουμε για να έχετε μία ιδέα για το πως εργάζεται. Ανοίξτε το Google Chrome στον desktop υπολογιστή σας και πηγαίνετε στην ιστοσελίδα της Google. Κάντε κλικ πάνω στο εικονίδιο με το μικρόφωνο μέσα στο πλαίσιο αναζήτησης. Ο υπολογιστή σας πιθανό να σας ρωτήσει να επιτρέψετε στην ιστοσελίδα να διαχειριστεί τον μικρόφωνο σας, πείτε του ναι για να προχωρήσετε. Αρχίστε να μιλάτε καθαρά, ακόμα και Ελληνικά, και θα δείτε να αναγράφεται όλη η πρότασή σας, λέξη – λέξη.
Αλλά ας δούμε πως να προσθέσετε την φωνητικής αναγνώρισης στην ιστοσελίδα σας
Το HTML5 Web Speech API υπάρχει εδώ και μερικά χρόνια τώρα, και χρειάζεται λίγο δουλειά για να μπορέσετε να το συμπεριλάβετε στην ιστοσελίδα σας. Προηγούμενα, θα μπορούσατε να προσθέσετε το χαρακτηριστικό x-webkit-speech εύκολα και απλά αλλά έχει πλέον καταργηθεί και τώρα θα πρέπει τώρα να χρησιμοποιήσετε JavaScript για API για να συμπεριλάβετε την αναγνώριση ομιλίας.
Παρακάτω μπορείτε να δείτε ένα επικαιροποιημένο κώδικα:
<!-- 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>
Εδώ έχουμε το CSS για να τοποθετήσετε την εικόνα μικρόφωνο μέσα στο πλαίσιο εισαγωγής, ο κώδικας που περιέχει την φόρμα εισαγωγής και τέλος την JavaScript που κάνει όλη τη βαριά δουλειά.
Όταν ο χρήστης κάνει κλικ στο μικρόφωνο μέσα στο πλαίσιο αναζήτησης, η Javascript ελέγχει αν ο browser του χρήστη υποστηρίζει την αναγνώριση ομιλίας. Αν ναι, περιμένει για την μεταγραφή του κειμένου όπου θα επιστρέψει από τους διακομιστές της Google και στη συνέχεια το υποβάλλει τη φόρμα.
Μερικές σημειώσεις:
1. Εάν η HTML φόρμα ή αναζήτηση είναι ενσωματωμένη μέσα σε ένα δικτυακό τόπο HTTPS, ο browser δεν ζητήσεις κατά επανάληψη την άδεια να χρησιμοποιήσει το μικρόφωνο.
2. Μπορείτε να αλλάξετε την τιμή του recognition.lang από “en-US” σε μια άλλη γλώσσα (όπως και Ελληνικά σε “el-GR” ή για γαλλικά σε “fr-FR” κλπ).
