La nuova API Web Speech JavaScript semplifica l'aggiunta del riconoscimento vocale alle pagine web. Questa API consente un controllo preciso e flessibilità sulle funzionalità di riconoscimento vocale in Chrome 25 e versioni successive. Ecco un esempio in cui il testo riconosciuto viene visualizzato quasi immediatamente durante la conversazione.
Diamo un'occhiata "dietro le quinte". Innanzitutto, controlliamo se il browser supporta l'API Web Speech verificando se esiste l'oggetto webkitSpeechRecognition. In caso contrario, consigliamo all'utente di eseguire l'upgrade del browser. Poiché l'API è ancora sperimentale, al momento è preceduta dal prefisso del fornitore. Infine, creiamo l'oggetto webkitSpeechRecognition che fornisce l'interfaccia vocale e impostiamo alcuni dei suoi attributi e gestori di eventi.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
Il valore predefinito per continuous è false, il che significa che quando l'utente smette di parlare, il riconoscimento vocale termina. Questa modalità è ideale per testo semplice, come campi di immissione brevi. In questa demo, lo abbiamo impostato su true, in modo che il riconoscimento continui anche se l'utente fa una pausa mentre parla.
Il valore predefinito per interimResults è false, il che significa che gli unici risultati restituiti dal riconoscitore sono definitivi e non cambieranno. La demo lo imposta su true per ottenere risultati iniziali intermedi che potrebbero cambiare. Guarda attentamente la demo: il testo grigio è temporaneo e a volte cambia, mentre il testo nero sono le risposte del riconoscitore contrassegnate come definitive e che non cambieranno.
Per iniziare, l'utente fa clic sul pulsante del microfono, che attiva questo codice:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
Impostiamo la lingua parlata per il riconoscitore vocale "lang" sul valore BCP-47 selezionato dall'utente tramite l'elenco a discesa di selezione, ad esempio "en-US" per l'inglese americano. Se non è impostato, il valore predefinito è lang dell'elemento principale e della gerarchia del documento HTML. Il riconoscimento vocale di Chrome supporta numerose lingue (vedi la tabella "langs" nel codice sorgente della demo), nonché alcune lingue con scrittura da destra a sinistra non incluse in questa demo, come he-IL e ar-EG.
Dopo aver impostato la lingua, chiamiamo recognition.start() per attivare il riconoscimento vocale. Una volta iniziato a acquisire l'audio, chiama il gestore eventi onstart e poi, per ogni nuovo insieme di risultati, chiama il gestore eventi onresult.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Questo gestore concatena tutti i risultati ricevuti finora in due stringhe: final_transcript e interim_transcript. Le stringhe risultanti possono includere "\n", ad esempio quando l'utente dice "nuovo paragrafo", quindi utilizziamo la funzione linebreak per convertirle in tag HTML <br> o <p>. Infine, imposta queste stringhe come innerHTML dei relativi elementi <span> corrispondenti: final_span con testo in nero e interim_span con testo grigio.
interim_transcript è una variabile locale e viene ricostruita completamente ogni volta che viene chiamato questo evento perché è possibile che tutti i risultati intermedi siano cambiati dall'ultimo evento onresult. Possiamo fare lo stesso per final_transcript semplicemente iniziando il ciclo for da 0. Tuttavia, poiché il testo finale non cambia mai, abbiamo reso il codice un po' più efficiente rendendo final_transcript una variabile globale, in modo che questo evento possa avviare il ciclo for a event.resultIndex e aggiungere solo il nuovo testo finale.
È tutto! Il resto del codice serve solo a rendere tutto più gradevole. Mantiene lo stato, mostra all'utente alcuni messaggi informativi e scambia l'immagine GIF sul pulsante del microfono tra il microfono statico, l'immagine del microfono barrato e il microfono animato con il punto rosso lampeggiante.
L'immagine del microfono barra viene visualizzata quando viene chiamato recognition.start() e poi sostituita con mic-animate quando viene attivato onstart. In genere, questo accade così rapidamente che la barra non è rilevabile, ma la prima volta che viene utilizzato il riconoscimento vocale, Chrome deve chiedere all'utente l'autorizzazione a utilizzare il microfono. In questo caso, onstart viene attivato solo se e quando l'utente concede l'autorizzazione. Le pagine ospitate su HTTPS non devono chiedere ripetutamente l'autorizzazione, mentre quelle ospitate su HTTP sì.
Rendi quindi le tue pagine web più coinvolgenti consentendo loro di ascoltare i tuoi utenti.
Saremmo lieti di ricevere il tuo feedback…
- Per commenti sulla specifica dell'API Web Speech del W3C: email, archivio mailing, gruppo della community
- Per commenti sull'implementazione di questa specifica in Chrome: email, archivio mailing
Consulta il white paper sulla privacy di Chrome per scoprire in che modo Google gestisce i dati vocali di questa API.