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

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

Demo dell'API Web Speech

DEMO / SOURCE

Diamo un'occhiata al funzionamento. Innanzitutto, controlliamo se il browser supporta l'API Web Speech verificando se esiste l'oggetto webkitSpeechRecognition. In caso contrario, suggeriamo all'utente di aggiornare il 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 di continuous è false, il che significa che il riconoscimento vocale terminerà quando l'utente smetterà di parlare. Questa modalità è ideale per testi semplici come i campi di input brevi. In questa demo, il valore è impostato su true, in modo che il riconoscimento continui anche se l'utente si ferma mentre parla.

Il valore predefinito di interimResults è false, il che significa che gli unici risultati restituiti dal sistema di riconoscimento sono definitivi e non cambieranno. La demo lo imposta su true in modo da ottenere risultati preliminari e provvisori che potrebbero cambiare. Guarda attentamente la demo: il testo grigio è provvisorio e a volte cambia, mentre il testo nero sono risposte del sistema di riconoscimento vocale 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 sistema di riconoscimento vocale "lang" sul valore BCP-47 selezionato dall'utente tramite l'elenco a discesa di selezione, ad esempio "en-US" per l'inglese (Stati Uniti). Se non è impostato, il valore predefinito è la lingua dell'elemento root e della gerarchia del documento HTML. Il riconoscimento vocale di Chrome supporta numerose lingue (vedi la tabella "langs" nell'origine 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 sistema di riconoscimento vocale. Una volta iniziata l'acquisizione dell'audio, chiama il gestore di eventi onstart e poi, 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 dice "nuovo paragrafo", quindi utilizziamo la funzione linebreak per convertirle in tag HTML <br> o <p>. Infine, imposta queste stringhe come innerHTML dei rispettivi elementi <span>: final_span, con testo nero, e interim_span, con testo grigio.

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

È tutto! Il resto del codice serve solo a 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 con la barra sul microfono e il microfono animato con il punto rosso pulsante.

L'immagine del microfono con la barra viene visualizzata quando viene chiamato recognition.start(), quindi viene sostituita con il microfono animato quando viene attivato onstart. In genere, questo avviene così rapidamente che la barra non è visibile, ma la prima volta che viene utilizzato il riconoscimento vocale, Chrome deve chiedere all'utente l'autorizzazione a utilizzare il microfono, nel qual 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 vive le tue pagine web consentendo loro di ascoltare i tuoi utenti.

Saremmo felici di ricevere il tuo feedback…

Per le nostre norme sulla privacy, consulta la sezione Informazioni sulla privacy in Chrome (aggiornamento: 16 giugno 2026).