Cómo añadir texto a voz con JavaScript

No necesitas un framework para añadir texto a voz (TTS) a tu sitio web. Tanto si trabajas con HTML y JavaScript puros, con un generador de sitios estáticos o con una página renderizada en el servidor, añadir voz a tu contenido es muy sencillo.

Esta guía explica cómo funciona la síntesis de voz del navegador, las ventajas y desventajas de cada enfoque y cómo integrar TTS2Go en cualquier proyecto JavaScript.

Los navegadores modernos incluyen de serie la Web Speech API. Con unas pocas líneas de JavaScript puro puedes hacer esto:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

No hacen falta paquetes de npm, claves de API ni servidor. Es gratis y funciona sin conexión.

El inconveniente está en la calidad y la consistencia:

• Las voces suelen sonar robóticas.
• La calidad y la variedad de voces cambian de una plataforma a otra.
• Chrome en Windows suena distinto que Safari en macOS.
• No puedes garantizar una experiencia de escucha uniforme para todos los usuarios.

El texto a voz con IA ha transformado lo que es posible hacer con la voz en la web. Los modelos de voz neuronales producen audio que suena realmente humano, con pausas, énfasis y ritmo naturales.

Una opción es pregenerar el audio de todo tu contenido y alojar los archivos en una CDN.

Ventajas

• Reproducción instantánea para los usuarios
• La misma calidad y la misma voz en todas partes

Desventajas

• Pagas por adelantado por generar el audio de todo tu contenido, se reproduzca o no
• El contenido tiene que conocerse de antemano
• Cada actualización obliga a regenerar los archivos
• Los costos de almacenamiento crecen con tu biblioteca de contenido

La pregeneración funciona bien con catálogos pequeños y estables, pero se vuelve cara y poco flexible a gran escala.

Un enfoque más eficiente es generar el audio solo cuando alguien pulsa reproducir.

Ventajas

• Solo pagas por el audio que piden los usuarios
• El contenido dinámico y el generado por usuarios se gestionan de forma natural

El reto

Sin ningún tipo de control, cualquiera que visite tu sitio podría desencadenar generaciones costosas. Necesitas una forma de decidir qué se genera y cuándo, para controlar tu presupuesto sin dejar de ofrecer TTS en todas partes.

TTS2Go adopta un enfoque híbrido que equilibra calidad, costo y simplicidad.

1. Una clave segura en el cliente

Añades el SDK a tu sitio con una clave de API de frontend. La clave utiliza bloqueo por dominio de origen y limitación de solicitudes, así que puede vivir sin riesgo en tu código del lado del cliente. Es un mecanismo de identificación y de limitación de solicitudes, no un secreto.

1. Primer visitante: TTS del navegador al instante + generación en segundo plano

Cuando la primera persona pulsa un botón de TTS en un contenido, escucha de inmediato la síntesis de voz del navegador. Al mismo tiempo, se envía en segundo plano una solicitud de generación a TTS2Go.

1. Aprobación y control del presupuesto

En tu panel de TTS2Go puedes:

• Aprobar las solicitudes de generación manualmente, o
• Configurar el sistema de aprobación con IA para que apruebe automáticamente las solicitudes que cumplan tus criterios.

Así tienes el control total de tu presupuesto de generación.

1. Visitantes siguientes: audio con IA premium desde la CDN

Una vez que la solicitud se aprueba y se genera, todos los usuarios que pulsen TTS en ese mismo contenido recibirán audio con IA de alta calidad con la voz que hayas elegido, servido al instante desde la CDN de TTS2Go.

En la práctica: el primer visitante obtiene el TTS del navegador, los costos se controlan mediante la aprobación y todos los demás reciben audio con IA premium.

Instala el paquete de JavaScript puro de TTS2Go con npm:

npm install @tts2go/vanilla

Si no usas un bundler, puedes cargarlo desde una CDN con una etiqueta <script> y acceder a él como window.TTS2Go.

Inicializa una nueva instancia de TTS2Go con las credenciales de tu proyecto:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

Llama a tts.create() con tu texto y un ID de voz para obtener una instancia de TTS con controles de reproducción completos:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

A partir de aquí puedes explorar toda la API de JavaScript de TTS2Go, por ejemplo:

• tts.getVoices(): muestra las voces disponibles para tu proyecto