Síntesis de voz con JavaScript nativo

Ver demo

Hace un tiempo que asistentes como Siri, Google Now o Cortana se han vuelto parte de nuestra vida diaria. Estas herramientas no solo reconocen nuestra voz, sino que también pueden leer texto en voz alta. Gracias a HTML5, JavaScript nos ofrece una API nativa para trabajar con síntesis de voz (text-to-speech o TTS) de manera sencilla, sin depender de librerías externas.

El sintetizador de voz nativo en JavaScript permite que cualquier texto se reproduzca en el navegador configurando idioma, tono y velocidad. En mi caso, me sorprendió lo rápido que se puede implementar un ejemplo funcional con apenas unas líneas de código.

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.

Cómo empezar con SpeechSynthesis en JavaScript

Crear tu primer objeto SpeechSynthesisUtterance

La clase SpeechSynthesisUtterance captura un texto y lo convierte en audio. Crear un objeto es tan simple como:

var speechMessage = new SpeechSynthesisUtterance('Hola, mundo!');
window.speechSynthesis.speak(speechMessage);

Este pequeño ejemplo funciona inmediatamente en navegadores modernos y es ideal para probar distintas voces y configuraciones.

Reproducir texto con el navegador: ejemplo básico

Para reproducir un texto dinámico, basta con asignar una variable:

var texto = "Bienvenido a mi aplicación web";
var speechMessage = new SpeechSynthesisUtterance(texto);
window.speechSynthesis.speak(speechMessage);

Esto abre la puerta a aplicaciones interactivas donde el contenido puede leer mensajes personalizados al usuario.

Propiedades esenciales de SpeechSynthesisUtterance

• text: el texto que el navegador hablará
  • Es la propiedad más importante. Aquí defines qué quiere decir el sintetizador.
• lang: cambiar el idioma de la voz
  • Permite especificar el idioma, por ejemplo:
  • speechMessage.lang = 'es-ES'; // Español de España

En pruebas propias, cambiar el idioma mejora la naturalidad de la pronunciación.

Esto permite personalizar la voz según el contexto de la aplicación, haciéndola más agradable para el usuario.

volume: controlar el volumen de la voz
speechMessage.volume = 0.8; // valor entre 0 y 1

Ideal para equilibrar el audio con otros sonidos de la página.

• pitch y rate: tono y velocidad de reproducción

speechMessage.pitch = 1.2; // tono ligeramente más alto
speechMessage.rate = 0.9;  // velocidad un poco más lenta

Esto permite personalizar la voz según el contexto de la aplicación, haciéndola más agradable para el usuario.

volume: controlar el volumen de la voz
speechMessage.volume = 0.8; // valor entre 0 y 1

Ideal para equilibrar el audio con otros sonidos de la página.

Eventos y control del flujo de la síntesis de voz

onstart y onend: detectar inicio y fin
speechMessage.onstart = function() {
 console.log('Reproducción iniciada...');
};
speechMessage.onend = function() {
 console.log('Reproducción finalizada.');
};

Estos eventos permiten sincronizar animaciones o efectos con la voz, algo que personalmente implementé en un proyecto de tutoriales interactivos.

Otros eventos útiles para proyectos avanzados

Existen eventos como onerror, onpause y onresume que permiten control completo del flujo de reproducción de voz.

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 varios 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
} else {
  console.log('La API no es soportada en este navegador');
}

Consejos para mejorar la experiencia del usuario

• Probar distintas voces disponibles en el navegador.
• Ajustar volumen y velocidad según el tipo de contenido.
• Evitar textos demasiado largos sin pausas.

Ejemplo de síntesis de voz

Text-to-speech dinámico desde variables

function hablar(texto) {
 var speechMessage = new SpeechSynthesisUtterance(texto);
 window.speechSynthesis.speak(speechMessage);
}

hablar("¡Hola! Esto es un ejemplo dinámico.");

Personalización de voz y velocidad para aplicaciones interactivas

En mi experiencia, permitir que el usuario seleccione el tono y la velocidad aumenta la accesibilidad y mejora la interacción en proyectos educativos o de tutoriales.

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

Preguntas frecuentes sobre sintetizador de voz en JavaScript

1. ¿Qué navegadores soportan la API de síntesis de voz en JavaScript?
   1. Chrome, Firefox, Edge y Safari soportan Web Speech API, aunque algunas voces pueden variar.
2. ¿Cómo puedo cambiar el idioma o la voz predeterminada?
   1. Se usan las propiedades lang y voice de SpeechSynthesisUtterance.
3. ¿Puedo controlar velocidad, volumen y tono de la voz?
   1. Sí, con rate, volume y pitch.
4. ¿Es posible reproducir texto dinámico desde una variable en JavaScript?
   1. Sí, simplemente asigna el texto a SpeechSynthesisUtterance.text y usa speechSynthesis.speak().