Apps web que hablan - Introducción a la API de síntesis de voz

La API de Web Speech agrega reconocimiento de voz (voz a texto) y síntesis de voz (texto a voz) a JavaScript. En la publicación, se explica brevemente lo último, ya que la API se lanzó recientemente en Chrome 33 (para dispositivos móviles y computadoras). Si te interesa el reconocimiento de voz, Glen Shires escribió hace un tiempo un excelente artículo sobre la función de reconocimiento de voz: "Voice Driven Web Apps: Introduction to the Web Speech API".

Conceptos básicos

El uso más básico de la API de síntesis es pasar el speechSynthesis.speak() y la oración:

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

Sin embargo, también puedes modificar los parámetros para afectar el volumen, la velocidad de habla, el tono, la voz y el idioma:

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);

Cómo configurar una voz

La API también te permite obtener una lista de las voces que admite el motor:

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

Luego, establece una voz diferente configurando .voice en el objeto de enunciado:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Demostración

En mi charla de Google I/O 2013, "More Awesome Web: features you've always wanted" (www.moreawesomeweb.com), mostré una demostración similar a Google Now o Siri del uso del servicio SpeechRecognition de la API de Web Speech con la API de Google Translate para traducir automáticamente la entrada del micrófono a otro idioma:

DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Lamentablemente, se usó una API no documentada (y no oficial) para realizar la síntesis de voz. Ahora tenemos la API de Web Speech completa para reproducir la traducción. Actualicé la demo para usar la API de Synthesis.

Navegadores compatibles

Chrome 33 es totalmente compatible con la API de Web Speech, mientras que Safari para iOS 7 es parcialmente compatible.

Detección de atributos

Dado que los navegadores pueden admitir cada parte de la API de Web Speech por separado (p.ej., el caso de Chromium), te recomendamos que detectes cada función por separado:

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

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