Déjame Escuchar Hablar a Tu Navegador: Usar la API Synthesis Speech

() translation by (you can also view the original English article)

En 1968, se estrenó 2001: Odisea en el Espacio. Presentó al famoso HAL 9000, un supercomputador capaz de hacer una enorme cantidad de cosas: reconocimiento facial, jugar al ajedrez, e incluso leer los labios. Pero lo que llamó la atención de la audiencia, e influyó desde entonces todas las obras de ciencia ficción, fue la habilidad de hablar de HAL.

Hoy en día, el hecho de que un ordenador que reproduzca vocalmente un trozo de texto concreto es algo normal. Sin embargo, solo recientemente somos capaces de hacerlo directamente desde el navegador. Y eso es lo que te voy a enseñar a hacer en este tutorial.

La API Speech Synthesis te permite usar JavaScript para seleccionar una pieza de texto y darle salida a través de tus altavoces en forma de habla. Al igual que todas las nuevas APIs, no está implementada en todos los navegadores, así que echa un vistazo en caniuse.com para conocer el estado actual de soporte. En el momento de la redacción de este artículo, está apoyado por Chrome y Safari, ambos tanto para su versión de escritorio como para dispositivos móviles.

¿Por Qué No Me Hablas?

Te sorprenderás cuando descubras lo fácil que es conseguir que tu navegador comience a hablarte. Para empezar, o bien crea un nuevo archivo HTML con una etiqueta script dentro, o bien abre la consola JavaScript de tu navegador. Después, escribe dentro la siguiente línea.

1	var utterance = new SpeechSynthesisUtterance();

Lo que estamos haciendo es crear una nueva instancia de una expresión. Piensa en esto como un pequeño sobre que contiene instrucciones que le indican al navegador lo debe decir y cómo lo debe hacer.

Primero, debemos pensar en algo extremadamente importante que diga nuestro navegador.

1	utterance.text = 'My name\'s Guybrush Threepwood, and I want to be a pirate!';

Después estaremos listos. Démosle el mensaje al sintetizador de habla de nuestro navegador e indiquémosle que hable. Recuerda subir antes el volumen de tu ordenador.

1	speechSynthesis.speak(utterance);

Guau, un ordenador que habla. Tan fácil como eso.

Cambiar las Voces

Ahora, por si eso no ha sido suficientemente increíble, la API de Speech Synthesis nos proporciona con un abundante conjunto de métodos y atributos que podemos usar en nuestra "expresión" para modificar su sonido. El cambio más notable de todos ellos es el cambio de la "persona" que habla. Tu sistema operativo viene con una variedad de voces integradas entre las que elegir, pero además tu navegador dispone de algunas más como medida extra. Veamos que voces tenemos disponibles nosotros.

1	speechSynthesis.getVoices().forEach(function(voice) {
2	console.log('Hi! My name is ', voice.name);
3	});

Si no observas ninguna respuesta, entonces quizá debas ejecutar esta función de nuevo. Chrome tiene un comportamiento extraño que te obliga a solicitar la cantidad de voces dos veces antes de inicializarse correctamente. Para superar este mal comportamiento, haz lo siguiente.

// Tell Chrome to wake up and get the voices.
speechSynthesis.getVoices();

setTimeout(function () {
    // After 1 second, get the voices now Chrome is listening.
    speechSynthesis.getVoices().forEach(function (voice) {
      console.log('Hi! My name is ', voice.name);
    });
}, 1000);

El número de voces varía de un sistema operativo a otro, pero en OS X, ¡tengo 74!. Más personajes que un episodio de los Simpsons. Probemos con uno.

Como habrás podido ver, speechSynthesis.getVoices() devuelve una cadena. Podríamos simplemente establecer la voz haciendo lo siguiente:

1	utterance.voice = speechSynthesis.getVoices()[11];

Esto le indicará al navegador que use la "voice 11", que en mi caso se corresponde con "Agnes". Pobre Agnes, reducida a un número. Una forma más bonita de hacerlo, y de tratar a Agnes como un ser humano real, sería usando el método de ECMAScript 6 findIndex, el cual funciona en navegadores que acepten además la API Web Synthesis, así que estamos cubiertos.

1	var agnesIndex = speechSynthesis.getVoices().findIndex(function (voice) {
2	return voice.name === 'Agnes';
3	});

Ahora que tenemos la cadena del índice de voces en la que está Agnes, podemos establecerla que sea la usada para nuestras expresiones.

1	utterance.voice = speechSynthesis.getVoices()[agnesIndex];
2	utterance.text = 'It\'s me Agnes! I’m alive! Thank you.';
3	speechSynthesis.speak(utterance);

Sin problemas, Agnes. Aunque me asustaste un poco con el volumen de tu voz. Vamos a bajártelo un poco.

Volumen, Frecuencia y Tono

Afortunadamente, todo lo que necesitamos para apaciguar la voz es indicar:

1	utterance.volume = 0.5;

Esto ajusta el volumen de la voz de Agnes a la mitad de lo que originalmente era, siendo 0 equivalente al silencio y 1 al volumen máximo. De todas formas, los parámetros que podemos cambiar no terminan aquí. ¿La voz que has escogido recita demasiado lento o rápido? Puedes cambiar la frecuencia con la que la voz lee tu texto mediante el atributo rate.

1	utterance.rate = 0.8;

El "rate" predeterminado con el que se expresa la voz es igual a 1. Así que aquí estamos ralentizándola a la mitad. La frecuencia (rate) más lenta que puedes especificar es 0.1, mientras que la velocidad más alta es 10. Las voces tienen además sus propios límites de frecuencia, así que aunque establezcas una frecuencia de 10, puede ocurrir que no emita 10 veces más rápido que en su modo predeterminado.

Otro parámetro interesante que puedes alterar es el tono. ¿Quieres que Agnes suene como Barry White? Para esto sirve el tono.

1	utterance.pitch = 0.2;

Aquí el tono más bajo que puedes establecer es 0, mientras que si quieres que las voces suenen como si hubiesen inhalado un globo de helio, establece el tono a 2, lo más alto a lo que pueden llegar.

Eventos

Ok, vamos a divertirnos un poco. La API Speech Synthesis dispone de algunos eventos diferentes con los que puedes jugar. Estos eventos, start, end, pause, y resume entre otros, y nos permiten invocar una función cuando sucede un evento en concreto. Al escuchar un evento, podemos invocar una función que inicie la conversación de otra voz, de forma que proporcione la ilusión de una diálogo.

Configuremos dos voces diferentes, y proporcionemos a cada una alguna frase a expresar. Recuerda, todo nuestro código debería estar incluido dentro de la función setTimeout de forma que se carguen todas las voces.

var voices = window.speechSynthesis.getVoices(),
    agnesUtterance = new SpeechSynthesisUtterance(),
    albertUtterance = new SpeechSynthesisUtterance();

agnesUtterance.voice = voices[11];
albertUtterance.voice = voices[12];

agnesUtterance.text = 'Hello Albert, I\'m Agnes';
albertUtterance.text = 'Hi Agnes, nice to meet you!';

Antes de iniciar el parafraseo de Agnes, en la función oned establecemos la respuesta de Albert de la siguiente forma. Esto le indicará a Albert que comience a hablar cuando Agnes deje de hacerlo.

1	agnesUtterance.onend = function () {
2	speechSynthesis.speak(albertUtterance);
3	}

Se ve bien. ¿Estás preparado para escuchar una conversación profunda? Inicia a Agnes de la manera habitual.

1	speechSynthesis.speak(agnesUtterance);

Increíble. Tu navegador está hablando ahora consigo mismo. Skynet tiene ahora conciencia de sí mismo.