Síntesis de voz con JavaScript nativo

Ver demo

Ya hace un tiempo que vienen apareciendo asistentes como Siri, Google Now o Cortana que entre varias funciones que prestan esta la del reconocimiento de voz y otras aplicaciones como Google Translator que cuenta con un sistema de síntesis de voz para distintos idiomas.

Gracias a HTML5 que provee una API que nos ofrece a los desarrolladores la posibilidad de trabajar con el reconocimiento de voz y la síntesis de voz de una manera sencilla y cuyo uso nos resulta similar a las demás APIs existentes en JavaScript.

Ya tenemos la mitad de la tarea realizada

En una entrada anterior hemos hablado un poco sobre la Web Speech API empleando el reconocimiento voz (speechRecognition()) en JavaScript la cual da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil:

• LA API DE RECONOCIMIENTO DE VOZ EN JAVASCRIPT: SPEECHRECOGNITION()

La clase SpeechSynthesisUtterance permite capturar textos y convertirlos en audio.

Ahora falta explicar cómo podemos hacer lo contrario que resulta en, dado un texto reproducir el audio en el idioma configurado mediante la API de síntesis de voz en JavaScript la cual también forma parte de la Web Speech API.

Como se indicó en un comienzo, es realmente sencillo usar la API de Web Speech para que el navegador nos "hable" en base a la configuración previa mediante la API de síntesis de voz; el código mínimo necesario sería algo como esto:

var speechSynthesisUtterance = new SpeechSynthesisUtterance('Hola'); window.speechSynthesis.speak(speechSynthesisUtterance);

Clic aquí para probar el ejemplo anterior.

Como vemos, primero creamos una instancia de la clase SpeechSynthesisUtterance pasando como parámetro el texto que será "hablado" por el navegador y procesamos este objeto mediante la interfaz speechSynthesis que es la que finalmente hará "hablar" al navegador.

Propiedades de la clase SpeechSynthesisUtterance

La clase SpeechSynthesisUtterance contiene una serie de métodos, propiedades, etc; que permiten establecer cómo el navegador "hablará"; una de ellas es la text que permite establecer/obtener el texto que será capturado al momento de que nuestro navegador nos habla mediante la API de síntesis de voz.

Aunque existen otros atributos que permiten personalizar un poco más vários aspectos de la clase SpeechSynthesisUtterance.

Como todas las APIs, la clase SpeechSynthesisUtterance cuenta con una serie de propiedades con las cuales podemos configurar varias cosas aparte del texto; entre las más importantes tenemos el idioma, volumen, voz, tono, velocidad, etc.

SpeechSynthesisUtterance.lang

Esta viene siendo también una de las propiedades más importantes y permite establecer u obtener el idioma del texto presentado para la API de síntesis de voz.

SpeechSynthesisUtterance.pitch

Permite establecer/obtener el tono de voz; el valor real (flotante) comprendido está entre cero (para el más bajo) y dos (para el más alto).

SpeechSynthesisUtterance.rate

Permite establecer la velocidad en la que "hablará" el navegador; el valor real (flotante) comprendido está entre cero punto uno (para el más bajo) y diez (para el más alto).

SpeechSynthesisUtterance.text

Esta viene siendo la propiedad más importante de todas, y es la que permite establecer u obtener el texto con el cual queremos que nuestro navegador nos hable.

SpeechSynthesisUtterance.volume

Establece u obtiene el volumen de la voz representado por un valor real (flotante) comprendido entre cero (para el más bajo) y uno (para el más alto).

Eventos manejadores

Puedes ver todos los eventos de la API de la síntesis de voz en la documentación oficial en el siguiente enlace; aunque entre los que se pueden considerar más importantes o usados tenemos:

peechMessage.onstart = function(e) {
  console.log('Hablando...');
};
 
speechMessage.onend = function(e) {
  console.log('Finalizado.');
};

Soporte de los navegadores

Para verificar el soporte de los navegadores basta con emplear el siguiente código:

if ('speechSynthesis' in window) {
// hay soporte de la SpeechSynthesisUtterance
}

Poniéndolo todo junto. Ejemplo de síntesis de voz

Aunque al igual que casi siempre, un sencillo ejemplo sirve para entender mejor cada una de las propiedades y eventos manejadores de la API de la síntesis de voz vistos anteriormente.

Ver demo