L'API Web Speech aggiunge il riconoscimento vocale (voce a testo) e la sintesi vocale (sintesi vocale) a JavaScript. Il post tratta brevemente quest'ultimo, dato che l'API è stata recentemente approdata in Chrome 33 (dispositivi mobili e desktop). Se ti interessa il riconoscimento vocale, Glen Shires ha scritto un po' di tempo fa molto bene sulla funzionalità di riconoscimento vocale, "Voice driven Web Apps: Introduction to the Web Speech API".
Dettagli di base
L'uso più basilare dell'API di sintesi è passare il speechSynthesis.speak() e l'espressione:
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
Tuttavia, puoi anche modificare i parametri per influire su volume, velocità della voce, tono, voce e lingua:
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';
msg.onend = function(e) {
console.log('Finished in ' + event.elapsedTime + ' seconds.');
};
speechSynthesis.speak(msg);
Impostazione di una voce
L'API ti consente anche di ottenere un elenco di voci supportate dal motore:
speechSynthesis.getVoices().forEach(function(voice) {
console.log(voice.name, voice.default ? voice.default :'');
});
Quindi imposta una voce diversa impostando .voice sull'oggetto enunciato:
var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);
Demo
Nel mio discorso alla conferenza Google I/O del 2013, "More Awesome Web: features you've always Want" (www.moreawesomeweb.com), ho mostrato una demo di Google Now/siri simile all'utilizzo del servizio SpeechRecognition dell'API Web Speech con l'API Google Traduttore per tradurre automaticamente l'input del microfono in un'altra lingua:
DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html
Sfortunatamente, ha utilizzato un'API non documentata (e non ufficiale) per eseguire la sintesi vocale. Ora abbiamo l'API Web Speech completa per ascoltare la traduzione. Ho aggiornato la demo in modo da utilizzare l'API di sintesi.
Supporto dei browser
Chrome 33 ha il supporto completo per l'API Web Speech, mentre Safari per iOS7 ha un supporto parziale.
Rilevamento delle funzionalità
Poiché i browser potrebbero supportare ogni parte dell'API Web Speech separatamente (ad esempio nel caso di Chromium), è consigliabile che le funzionalità rilevino separatamente ogni funzionalità:
if ('speechSynthesis' in window) {
// Synthesis support. Make your web apps talk!
}
if ('SpeechRecognition' in window) {
// Speech recognition support. Talk to your apps!
}