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 trata brevemente esto último, ya que la API se incorporó recientemente a Chrome 33 (dispositivos móviles y computadoras de escritorio). Si te interesa el reconocimiento de voz, Glen Shires tuvo un excelente comentario hace un tiempo 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 declaración:

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

Sin embargo, también puedes modificar los parámetros para modificar el volumen, la velocidad, 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);

Configurando una voz

La API también te permite obtener una lista de voces compatibles con el motor:

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

Luego, establece una voz diferente estableciendo .voice en el objeto de expresión:

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 already want" (www.moreawesomeweb.com), mostré una demostración similar a Google Now/Siri sobre cómo usar el 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:

DEMOSTRACIÓN: http://www.moreawesomeweb.com/demos/speech_translate.html

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

Navegadores compatibles

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

Detección de atributos

Dado que los navegadores pueden admitir cada parte de la API de Web Speech por separado (p.ej., el caso con 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!
}