Riconoscimento vocale con Web Speech API

Ecco un semplice tutorial in italiano sul riconoscimento vocale con le Web Speech API di Google.

Grazie a Google è possibile inserire facilmente la funzione di riconoscimento vocale su qualsiasi pagina web, in modo completamente gratuito e senza possedere particolari conoscenze tecniche di programmazione.
Nel momento in cui scrivo il riconoscimento vocale funziona solo sul web browser Chrome.

Con la Web Speech API potrete offrire agli utenti del vostro sito una funzione che permetta di interagire “a voce”, tramite un microfono collegato al PC, con la vostra pagina web, ad esempio per dettare un commento o eseguire a voce dei comandi prestabiliti.

Come funziona

La buona notizia è che non bisogna essere esperti programmatori per usare il riconoscimento vocale. In effetti la parte relativa al sistema con cui le onde sonore vengono ricevute ed elaborate in modo che vengano trasformate in parole compiute in questo caso non ci riguarda. Di questo se ne occupa Google!

La Web Speech API fornisce solo lo strumento per raccogliere il messaggio sonoro e inviarlo a Google, il quale elabora il messaggio e restituisce una stringa (e altri parametri) contenente il messaggio decifrato.
Per questo il riconoscimento vocale funziona solo se si è collegati ad internet: una pagina web che gira su un computer scollegato non funzionerà perché non riuscirà a comunicare con Google, che fa la maggior parte del lavoro.

Come usare la Web Speech API

Ora vediamo come si fa, tecnicamente, ad aggiungere il riconoscimento vocale al proprio sito.
Ci sono due metodi, uno semplicissimo ma molto rigido, l’altro un po’ più complicato ma che vi permetterà di sfruttare tutta la potenza di questo prezioso strumento.

Metodo facile

Il sistema più facile non richiede l’aggiunta di javascript: basta inserire nella propria pagina web un campo <input> con l’attributo x-webkit-speech, così:

<input x-webkit-speech="">

Se lanciate la pagina (ricordo che al momento funziona solo con Chrome) otterrete un campo di testo pronto per il microfono, tipo:
Esempio input x-webkit-speech

Potete anche scegliere la lingua, inserendo l’attributo lang, ad esempio:

<input lang="it" x-webkit-speech="">

Questo sistema è semplice, quasi banale, ma lascia poco spazio alla personalizzazione e all’elaborazione dei dati; dobbiamo prendercelo così com’è, giusto per vedere come funziona ma senza poterne prendere il controllo.

Metodo normale, con uso di Javascript

Con questo sistema avremo il pieno controllo della Web Speech API, grazie all’uso di Javascript.
Per prima cosa si deve creare un oggetto che gestisca il riconoscimento vocale, qui chiamato “recognition”:

recognition = new webkitSpeechRecognition();

L’oggetto appena creato può essere configurato, ad esempio per specificare la lingua, oppure per indicare se bisogna stoppare la registrazione dopo ogni pausa e altre variabili di cui non entro in merito adesso. Per maggiori informazioni meglio consultare la guida ufficiale

recognition.lang = "it";
recognition.continuous = true;

Il più è fatto. Per dare il via al riconoscimento vocale basta chiamare la funzione start(), così:

recognition.start();

Adesso il riconoscimento vocale è attivato, e tutto quello che viene “detto” al microfono viene inviato a Google, il quale restituisce il risultato dell’elaborazione che potrà essere gestito grazie a Javascript e all’evento onresult:

recognition.onresult = function (event) {};

In pratica ogni volta che Google mette a disposizione il risultato di un elaborazione, viene invocata tale funzione, che noi possiamo usare per ri-elaborare il risultato e usarlo come più ci piace: ad esempio per riempire un campo di testo.

Recuperare e gestire le informazioni elaborate

La funzione chiamata con l’evento “onresult” riceve un parametro: event.

L’oggetto event contiene tutte le informazioni che ci servono: le stringhe “tradotte” da Google, il loro “grado di fiducia”, ovvero quanto Google è sicuro di aver capito la parola, le possibili alternative e così via.

event.results[] è un array che contiene le parole in un dato momento i; ogni elemento di tale array ha diversi attributi, ad esempio event.results[i].isFinal dice se tale risultato è definitivo o in fase di elaborazione.

Anche qui non entro nello specifico e rimando alla guida ufficiale

Esempio

Il modo più semplice di recuperare ed elaborare l’oggetto event è quello di fare un ciclo per tutti gli elementi dell’array event.results ed elaborare solo quelli “definitivi”, cioè quelli che hanno isFinal=true.

for (var i = event.resultIndex; i < event.results.length; ++i) {
 if (event.results[i].isFinal) {
  console.log(event.results[i][0].transcript);
 }
}

Per completare la panoramica ecco il codice completo:

recognition = new webkitSpeechRecognition();
recognition.lang = "it";
recognition.continuous = true;
recognition.onresult = function (event) {
 for (var i = event.resultIndex; i < event.results.length; ++i) {
  if (event.results[i].isFinal) {
   console.log(event.results[i][0].transcript);
  }
 }
};
recognition.start();

Demo

Studiando la Web Speech API di Google ho fatto un piccolo test realizzando una pagina web col riconoscimento vocale.

Visita anche la Demo ufficiale