Con il rilascio della versione 25 di Google Chrome, una delle più interessanti caratteristiche introdotte è il supporto al riconoscimento vocale attraverso le Web Speech API. Le Web Speech API sono librerie javascript per consentire il riconoscimento vocale (Speech to Text).

Il riconoscimento vocale introdotto supporta svariate lingue, dall’inglese all’italiano e così via. Attualmente gli sviluppatori hanno due modi per implementare il riconoscimento vocale con queste API sulle proprie pagine.
Vediamoli assieme:

Il primo Metodo

Il modo più facile per utilizzare questa tecnologia è utilizzare le funzionalità già implementate nel tag html input. Sarà necessario aggiungere soltanto l’attributo x-webkit-speech:

<input x-webkit-speech>

E otterrete una text-box che vi consente di dettargli il testo:

Di default il linguaggio per riconoscere la voce sarà settato allo stesso utilizzato di default nel browser (quindi, tranquillamente l’italiano), ma potete cambiarlo in due modi:

1) Aggiungendo l’attributo lang=”en” dove il valore specifica la lingua che vogliamo utilizzare:

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

2) Usando un meta tag sulla pagina html:

<meta http-equiv="Content-Language" content="en"/>

I vantaggi di questo primo metodo sono:
– La facilità d’implementazione.
– Il browser non richiede il permesso all’utente di utilizzare il microfono.

Gli svantaggi invece:
– Il riconoscimento vocale è stoppato in caso di brevi pause.
– Quando riprendete il riconoscimento vocale in uno stesso input box, il vecchio valore è sostituito dal nuovo appena riconosciuto.
– E’ supportato solo dal tag input.
– I risultati intermedi del riconoscimento vocale non sono mostrati, l’utente vedrà i risultati del riconoscimento vocale non appena terminerà di parlare e il processo di riconoscimento avrà fine.

Il secondo Metodo – Web Speech API con Javascript

Questo metodo è basato sull’interazione con le API Web Speech, utilizzando Javascript. Per iniziare a utilizzare l’API, dovete creare un nuovo oggetto adibito al riconoscimento:

var recognition = new webkitSpeechRecognition();

Potete anche settare ulteriori parametri:

1) Settare il riconoscimento continuo che permette all’utente di effettuare lunghe pause e dettare molto testo. Di default questa proprietà è su false:

recognition.continuous = true;

2) Abilitare i risultati intermedi. Con quest’ultimo avete accesso al riconoscimento intermedio dei risultati, mostrando nella text box la loro elaborazione subito dopo esser stati ricevuti dai server di google. L’utente vedrà il testo in continuo cambiamento, altrimenti il risultato del testo non sarà visibile subito, ma solo ad elaborazione completa, di default anche questa opzione è impostata su false:

recognition.interimResults = true;

3) Settare il linguaggio di riconoscimento. Di default corrisponde al linguaggio del browser:

recognition.lang = "it";

Per iniziare il riconoscimento vocale è sufficiente chiamare la funzione:

recognition.start();

Per stoppare il riconoscimento:

recognition.stop();

Per i risultati è necessario inizializzare il gestore dei risultati (results handler):

recognition.onresult = function(event) {};

All’interno della funzione, l’oggetto event ha i seguenti campi:

– event.results[i] : L’array contenente gli oggetti risultato del riconoscimento. Ogni elemento dell’array corrisponde ad una parola riconosciuta.

– event.resultIndex : L’indice attuale del risultato.

– event.results[i][j] : Array multidimensionale, alla i-esima parola corrispondono delle j-esime parole alternative alla parola riconosciuta. Il primo elemento di i rimane comunque la parola riconosciuta più probabile.

– event.results[i].isFinal : Un valore booleano che ci dice se la parola riconosciuta è un valore finale o intermedio.

– event.results[i][j].transcript : La rappresentazione testuale di una parola.

Alcuni Esempi di Riconoscimento vocale

Scriviamo una funzione elementare che aggiunge solo i risultati finali (non gli intermedi) ad una text box (input o textarea è indifferente):

recognition.onresult = function (event) {
    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            insertAtCaret(IDtextArea, event.results[i][0].transcript);
        }
    }
};

Dove IDtextArea è l’identificatore della nostra text box.

Ora consideriamo un altro esempio più complesso, che mostra anche i risultati intermedi nella text box. L’implementazione dei risultati finali è la stessa vista sopra, è stato aggiunto solo il codice per la visualizzazione dei risultati intermedi.

recognition.onresult = function (event) {
    // Calcoliamo e salviamo la posizione del cursore dove il testo verrà mostrato
    var pos = textArea.getCursorPosition() - interimResult.length;
    // Cancelliamo il risultato intermedio dalla textbox finale
    textArea.val(textArea.val().replace(interimResult, ''));
    interimResult = '';
    // Ripristino della posizione del cursore
    textArea.setCursorPosition(pos);
    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            insertAtCaret(textAreaID, event.results[i][0].transcript);
        } else {
            // Output del risultato intermedio nel campo di testo e aggiungiamo un marker per il risultato intermedio.
            insertAtCaret(textAreaID, event.results[i][0].transcript + '\u200B');
            interimResult += event.results[i][0].transcript + '\u200B';
        }
    }
};

I vantaggi delle Web Speech API con javascript:
– Possibilità di dettatura vocale continuata.
– Possibilità di implementare un riconoscimento multi-sessione con il salvataggio dei risultati.
– Possibilità di inserire il testo riconosciuto ovunque nella pagina.
– Possibilità di mostrare e operare con i risultati intermedi.

Gli svantaggi:
– L’utente deve dare il consenso al browser di accedere al microfono prima di iniziare una sessione d’ascolto (con i siti in https, il permesso dopo che viene dato una volta, non viene nuovamente richiesto).
– La sessione d’ascolto è limitata a 60 secondi.
Lo svantaggio comunque più notevole, per entrambi i metodi e per le API fornite da google, è che il riconoscimento avviene sui server in remoto e non localmente, quindi è necessario disporre di una connessione internet sempre attiva. (Motivo per cui il riconoscimento continuo ha comunque un limite di 60 secondi).
Il riconoscimento vocale per ora è disponibile solo su Chrome, gli altri browser quali Safari, Firefox, Internet Explorer ci si aspetta lo supportino a breve.