App web basate su comandi vocali: introduzione all'API Web Speech

La nuova API Web Speech di JavaScript semplifica l'aggiunta del riconoscimento vocale alle tue pagine web. Questa API consente un controllo preciso e la flessibilità delle funzionalità di riconoscimento vocale in Chrome 25 e versioni successive. Ecco un esempio in cui il testo riconosciuto appare quasi immediatamente mentre si parla.

Demo dell'API Web Speech

DEMO / ORIGINE

Diamo uno sguardo alle funzioni avanzate. Innanzitutto, verifichiamo se il browser supporta l'API Web Speech controllando se l'oggetto webkitSpeechRecognition esiste. In caso contrario, suggeriamo all'utente di eseguire l'upgrade del browser. Poiché l'API è ancora sperimentale, al momento è con prefisso del fornitore. Infine, creiamo l'oggetto webkitSpeechRecognition che fornisce l'interfaccia vocale e ne impostiamo alcuni 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, il che significa 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 lo impostiamo 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 per ricevere risultati tempestivi e intermedi che potrebbero cambiare. Guarda la demo con attenzione: il testo grigio è il testo temporaneo e può cambiare, mentre il testo nero sono 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();

Impostiamo la lingua parlata per il riconoscimento vocale "lang" sul valore BCP-47 selezionato dall'utente tramite l'elenco a discesa di selezione, ad esempio "en-US" per Inglese-Stati Uniti. Se non viene configurato, il valore predefinito corrisponde alla lingua dell'elemento principale e della gerarchia del documento HTML. Il riconoscimento vocale di Chrome supporta numerose lingue (consulta la tabella "langs" nel codice sorgente della demo), nonché alcune lingue 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 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 usiamo la funzione linebreak per convertirle nei tag HTML <br> o <p>. Infine, imposta queste stringhe come codice innerHTML degli elementi <span> corrispondenti: final_span con testo nero e interim_span con testo grigio.

interim_transcript è una variabile locale e viene ricreato completamente ogni volta che viene chiamato questo evento perché è possibile che tutti i risultati provvisori siano cambiati dall'ultimo evento onresult. Potremmo fare la stessa cosa per final_transcript semplicemente avviando il ciclo for da 0. Tuttavia, poiché il testo finale non cambia mai, abbiamo reso il codice qui un po' più efficiente rendendo final_transcript un globale, in modo che questo evento possa avviare il ciclo for in event.resultIndex e aggiungere solo il nuovo testo finale.

È tutto! Il resto del codice serve solo a dare un aspetto elegante a tutto. 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 del microfono viene mostrata quando viene chiamato recognition.start(), per poi essere sostituita da mic-animate quando si attiva onstart. In genere questo accade così velocemente che la barra non è visibile, ma al primo utilizzo del riconoscimento vocale, Chrome deve chiedere all'utente l'autorizzazione a utilizzare il microfono, nel qual caso onstart si attiva solo quando e se l'utente concede l'autorizzazione. Le pagine ospitate su HTTPS non devono chiedere ripetutamente l'autorizzazione, a differenza delle pagine ospitate su HTTP.

Dai vita alle tue pagine web consentendo loro di ascoltare i tuoi utenti.

Facci sapere cosa ne pensi...

Consulta il white paper sulla privacy di Chrome per scoprire in che modo Google gestisce i dati vocali da questa API.