Come creare un assistente vocale nel browser con JavaScript e Web Speech API
Le interfacce vocali stanno diventando sempre più importanti nello sviluppo web moderno.
Le tecnologie dei browser permettono oggi di utilizzare input e output vocali direttamente nel client, senza installare librerie esterne.
In questo articolo vedremo come creare un semplice assistente vocale utilizzando JavaScript e la Web Speech API.
Cos’è la Web Speech API
La Web Speech API è una tecnologia integrata nei browser moderni che offre due funzionalità principali:
Speech Recognition (riconoscimento vocale)
Speech Synthesis (sintesi vocale)
Grazie a queste funzionalità è possibile:
trasformare la voce in testo
interpretare comandi vocali
far rispondere il browser con l’audio
Configurazione del riconoscimento vocale
Il primo passo è inizializzare il riconoscimento vocale:
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "it-IT";
recognition.continuous = true;
recognition.onresult = function(event) {
const testo = event.results[event.results.length - 1][0].transcript.toLowerCase();
console.log(testo);
};
Questo codice permette di convertire la voce dell’utente in testo utilizzabile.
Sintesi vocale
Per far rispondere il browser utilizziamo la sintesi vocale:
function speak(text){
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "it-IT";
speechSynthesis.speak(utterance);
}
Gestione dei comandi vocali
Dopo aver ottenuto il testo, possiamo interpretarlo come comando:
function handleCommand(text){
if(text.includes("ora")){
speak("Sono le " + new Date().toLocaleTimeString("it-IT"));
return;
}
if(text.includes("apri youtube")){
window.open("https://www.youtube.com");
return;
}
if(text.includes("cerca")){
const query = text.replace("cerca", "").trim();
window.open("https://www.google.com/search?q=" + query);
return;
}
speak("Comando non riconosciuto");
}
Applicazioni pratiche
Questa tecnologia può essere utilizzata per:
assistenti vocali nel browser
strumenti di accessibilitÃ
interfacce interattive
prototipi di AI web
Limiti della tecnologia
La Web Speech API presenta alcuni limiti:
supporto non uniforme tra browser
necessità di connessione internet
precisione variabile del riconoscimento vocale
Nonostante ciò, è molto utile per prototipi e applicazioni leggere.
Conclusione
Lo sviluppo di applicazioni vocali nel browser è oggi molto più accessibile grazie alle API moderne. Con poche righe di JavaScript è possibile creare sistemi interattivi basati su voce e risposta automatica.
Demo
Un esempio pratico è disponibile online:
Top comments (0)