App web che parlano - Introduzione all'API Speech Synthesis

L'API Web Speech aggiunge a JavaScript il riconoscimento vocale (conversione della voce in testo) e la sintesi vocale (traduzione di testo in voce). Il post tratta brevemente quest'ultima, poiché l'API è stata recentemente implementata in Chrome 33 (dispositivi mobili e computer). Se ti interessa il riconoscimento vocale, Glen Shires ha scritto un articolo molto interessante sulla funzionalità di riconoscimento vocale, "Voice Driven Web Apps: Introduction to the Web Speech API".

Nozioni di base

L'utilizzo più semplice dell'API di sintesi è passare speechSynthesis.speak() e l'enunciazione:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Tuttavia, puoi anche modificare i parametri per influire su volume, velocità del parlato, 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 delle voci supportate dal motore:

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

Imposta una voce diversa impostando .voice sull'oggetto utterance:

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 talk del Google I/O 2013, "More Awesome Web: features you've always wanted" (www.moreawesomeweb.com), ho mostrato una demo simile a Google Now/Siri dell'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

Purtroppo, utilizzava un'API non documentata (e non ufficiale) per eseguire la sintesi vocale. Ora abbiamo l'API Web Speech completa per riprodurre la traduzione. Ho aggiornato la demo per utilizzare l'API di sintesi.

Supporto dei browser

Chrome 33 supporta completamente l'API Web Speech, mentre Safari per iOS 7 ne supporta solo una parte.

Rilevamento di funzionalità

Poiché i browser possono supportare ogni parte dell'API Web Speech separatamente (ad esempio nel caso di Chromium), ti consigliamo di rilevare ogni funzionalità separatamente:

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}