Cuando estamos diseñando una App en ocasiones necesitamos leerle un texto al usuario (tal vez leer artículos de un blog mientras hace otra cosa) u ofrecerle un conversor de texto a voz, generalmente por cuestiones de accesibilidad. Existen servicios externos que nos proporcionan un resultado bastante realista, pero la mayoría son de pago.

Puede que tal vez no lo sepas porque de momento no es una API muy extendida, pero, ¿sabías que con Javascript puedes hacer que el navegador convierta texto a voz? Y todo ello con apenas unas líneas de código y la API de speechSynthesis. Este proceso, el de convertir texto a voz se suele llamar tts o text to speech. En este artículo te cuento cómo hacer hablar a tu navegador a través de varios ejemplos.

Ten en cuenta que esta API depende de las voces de tu navegador o del sistema operativo que use el usuario. Y generalmente, el resultado no es tan natural o tan humano como los servicios en la nube. Pero para salir del paso o no invertir mucho dinero es perfecta.

La interfaz speechSynthesis

Presta atención al siguiente fragmento de código Javascript. Puede que no te lo termines de creer, pero con apenas estas cuatro líneas se consigue convertir texto a voz en Javascript.

const synth = window.speechSynthesis
let text = "Hello everybody!!!!"
const utterThis = new SpeechSynthesisUtterance(text)

synth.speak(utterThis)

Lo único que estamos haciendo es declarar una variable que contiene una instancia de SpeechSynthesis, la puerta a la API Web Speech. En este caso, para convertir texto a voz.

Posteriormente creamos una variable que contiene una instancia de SpeechSynthesisUtterancey hacemos que el navegador hable. La interfaz SpeechSynthesisUtterance representa una solicitud para que el navegador sea capaz de modular un texto.

Cuesta creer, pero parece que los navegadores se han puesto las pilas con el asunto de la accesibilidad y, en este caso, la modulación de voz. Sin embargo, te invito a que compruebes la compatibilidad con todos los navegadores porque solo funcionarán los más modernos.

Propiedades de SpeechSynthesisUtterance. Configúralo a tu gusto.

¡ Genial ! Ya hemos conseguido que nuestro navegador convierta texto a voz, pero no queda del todo bien porque no está configurado a nuestro gusto. Lo primero en nuestro caso es establecer el idioma español para que nuestros visitantes lo entiendan:

const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance('Hablo en español');
utterThis.lang = 'es-ES';
synth.speak(utterThis);

Si no establecemos por defecto un idioma, se cogerá de forma automática el que figure en la etiqueta <html lang="en">. Si este tampoco se hubiera definido, cogerá el que tenga por defecto el navegador del usuario.

También podemos cambiar la voz con la que suena el navegador. Para ello, podemos consultar las voces disponibles con synth.getVoices(), que devolverá un listado de voces disponibles. Generalmente dependerá del navegador pero también del sistema operativo: por ejemplo en Chrome solo hay una voz disponible para cada idioma.

Ten en cuenta que las voces no estarán disponibles cuando termine de cargar el window, ya que es una operación asíncrona. La mejor opción para detectar cuándo están cargadas las voces es usar el evento window.speechSynthesis.onvoiceschanged

Y, por último, podemos personalizar el rate (velocidad de lectura) y el pitch (el tono) de la voz. En el caso del rate, debemos establecer un valor decimal entre 0.1 (el más bajo posible; leerá despacio) y el 10 (más alto), siendo 1 el valor por defecto. Y, por otro lado, el pitch es un valor decimal entre 0 (más bajo; un auténtico Barry White ) y el 2 (más alto; casi solo lo oyen los felinos), siendo 1 el valor por defecto.

const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance('Tengo una voz grave');
utterThis.pitch = 0.2;
synth.speak(utterThis);

Controles de voz

Javascript nos permite controlar si está sonando o no alguna voz en el navegador. Para ello, la API de speechSynthesis expone cuatro métodos que son de utilidad (sobretodo si el contenido que se está leyendo cambia).

El método speechSynthesis.speak(SpeechSynthesisUtterance) comenzará el proceso de convertir el texto a voz (por lo que el texto deberá estar ya establecido antes de llamar a este método). Ten en cuenta que si hay alguna otra instancia convirtiendo ya el texto a voz, la nueva se quedará encolada hasta que finalicen las existentes.

El resto de métodos, pause(), resume() y cancel() pausará, retomará (desde donde se ha quedado cuando se hizo la pausa) y cancelará la lectura respectivamente. Son útiles para, por ejemplo cuando cambie el texto, cancelar la lectura y recomenzarla desde cero con el texto ya cambiado. Fíjate en que no debemos pasar la instancia de SpeechSynthesisUtterancecuando estamos pausando, retomando o cancelando alguna lectura. Solo se debe pasar cuando se desea comenzar a leer.

const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance('Lorem ipsum...');

onTextChange = (newText) => {
    synth.cancel();
    utterThis.text = newText;
    synth.speak(utterThis);
}

Solo es compatible con navegadores modernos

Como bien sabes, la mayoría de navegadores están haciendo un gran trabajo en el uso de API modernas, permitiendo hacer de forma nativa una gran cantidad de features que de otra forma habría costado mucho implementar. Sin embargo, cuando te dedicas al front, sabes que aunque la mayoría de usuarios utiliza navegadores modernos, siempre existe el usuario que sigue con su Windows XP e Internet Explorer 11.

Si un usuario con un navegador desfasado intenta usar la API de speechSynthesis, el código fallará de forma inexorable. Por ello, y cuando uses APIs modernas, siempre es recomendable detectar si el user-agent del usuario tiene disponible la API en cuestión y tener preparado un camino alternativo si no es el caso.

if ('speechSynthesis' in window) {
  //El navegador es moderno. Todo ok!
  window.speechSynthesis.speak(
    new SpeechSynthesisUtterance('A jugar')
  )
} else {
    //El navegador es antiguo. Camino alternativo
    // Tal vez mostrar una versión reducida o un cartel de información
    alert('Actualízate!');
}

Conclusión

Ya sea para permitir a los usuarios la lectura automática de posts mientras navegan por otras web o para hacer la vida más fácil a los usuarios aportando accesibilidad, Javascript permite la conversión de texto a voz de forma simple y sencilla.

Así que la próxima vez que necesites implementar un sistema fácil de lectura de texto y de forma nativa, acuérdate de window.speechSynthesis. En el siguiente artículo de esta colección, conoceremos cómo se puede convertir la voz del usuario en texto, pero hasta entonces…

¡Qué tengas un feliz coding!