La nuova API Web Speech di JavaScript semplifica l'aggiunta del riconoscimento vocale alle tue pagine web. Questa API consente un controllo preciso e una flessibilità tali dalle funzionalità di riconoscimento vocale di Chrome 25 e versioni successive. Ecco un esempio in cui il testo riconosciuto viene visualizzato quasi immediatamente mentre parli.
Diamo un'occhiata dietro le quinte. Innanzitutto, verifichiamo se il browser supporta l'API Web Speech controllando se esiste l'oggetto webkitSpeechRecognition. In caso contrario, suggeriamo all'utente di eseguire l'upgrade del browser. Poiché l'API è ancora in fase sperimentale, al momento ha il 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 di continuous è false, vale a dire che quando l'utente smette di parlare, il riconoscimento vocale termina. Questa modalità è ideale per testi semplici come i campi di immissione brevi. In questa demo, l'abbiamo impostato su true, in modo che il riconoscimento continui anche se l'utente fa una pausa mentre parla.
Il valore predefinito di interimResults è false, vale a dire che gli unici risultati restituiti dal riconoscimento sono definitivi e non cambieranno. La demo lo imposta su true in modo da ottenere risultati tempestivi e provvisori che potrebbero cambiare. Guarda attentamente la demo: il testo grigio è quello temporaneo e a volte cambia, mentre il testo nero è le risposte del riconoscimento che sono contrassegnate come definitive e 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();
Abbiamo impostato la lingua parlata per il riconoscimento vocale "lang" al valore BCP-47 che l'utente ha selezionato tramite l'elenco a discesa, ad esempio "en-US" per inglese-Stati Uniti. Se non viene configurato, viene utilizzato per impostazione predefinita il valore 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é alcuni linguaggi da destra a sinistra non inclusi in questa demo, ad esempio he-IL e ar-EG.
Dopo aver impostato la lingua, chiamiamo recognition.start() per attivare il riconoscimento vocale. Una volta avviata l'acquisizione dell'audio, chiama il gestore di eventi onstart e, per ogni nuovo insieme di risultati, chiama il gestore di 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 pronuncia "nuovo paragrafo", quindi utilizziamo la funzione linebreak per convertirle in tag HTML <br> o <p>. Infine, imposta queste stringhe come codice interno HTML degli elementi <span> corrispondenti: final_span con testo nero e interim_span con testo grigio.
interim_transcript è una variabile locale e viene completamente ricreata ogni volta che viene chiamato questo evento perché è possibile che tutti i risultati provvisori siano cambiati dall'ultimo evento onresult. Potremmo fare lo stesso per final_transcript semplicemente facendo partire il ciclo for su 0. Tuttavia, poiché il testo finale non cambia mai, abbiamo reso il codice qui un po' più efficiente rendendo final_transcript globale, in modo che questo evento possa avviare il loop for in event.resultIndex e aggiungere solo il nuovo testo finale.
È tutto! Il resto del codice serve solo per rendere tutto più bello. Mantiene lo stato, mostra all'utente alcuni messaggi informativi e scambia l'immagine GIF sul pulsante del microfono tra il microfono statico, l'immagine della barra del microfono e l'animazione del microfono con il punto rosso pulsante.
L'immagine della barra microfono viene mostrata quando viene chiamato recognition.start() e viene sostituita con l'animazione del microfono quando si attiva onstart. In genere ciò avviene così rapidamente che la barra non è evidente, ma la prima volta che viene utilizzato il riconoscimento vocale, Chrome deve chiedere all'utente l'autorizzazione per utilizzare il microfono. In questo caso, onstart si attiva solo se e se l'utente concede l'autorizzazione. A differenza delle pagine ospitate su HTTPS, le pagine ospitate su HTTPS non devono chiedere ripetutamente l'autorizzazione.
Dai vita alle tue pagine web consentendo loro di ascoltare i tuoi utenti.
Ci piacerebbe conoscere la tua opinione...
- Per i commenti sulla specifica dell'API W3C Web Speech: email, archivio della posta, gruppo della community
- Per commenti sull'implementazione di questa specifica da parte di Chrome: email, archivio della posta
Leggi il white paper sulla privacy di Chrome per scoprire in che modo Google gestisce i dati vocali di questa API.