Cómo añadir texto a voz a React

El texto a voz se está convirtiendo rápidamente en una función imprescindible de la web moderna. Ya sea por accesibilidad, para aumentar la interacción o simplemente para dar a los usuarios otra forma de consumir contenido, añadir voz a tu proyecto de React es más fácil de lo que crees. 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 tu app de React paso a paso.

Todos los navegadores modernos incluyen la Web Speech API. Puedes llamar a window.speechSynthesis.speak() con un SpeechSynthesisUtterance y escuchar el texto leído en voz alta sin ningún servicio externo. Es gratis, no requiere clave de API y se ejecuta por completo en el cliente.

El problema es la calidad. Las voces del navegador suenan robóticas, cambian según el sistema operativo y el navegador, y ofrecen poca variedad. El mismo texto puede sonar completamente distinto en dispositivos diferentes.

El texto a voz con IA lo ha cambiado todo. Los modelos de voz neuronales producen audio que suena sorprendentemente humano, con entonación, ritmo y emoción naturales. Estos servicios admiten decenas de idiomas y cientos de voces.

La contrapartida es que generar este audio cuesta dinero y requiere una API, lo que plantea una pregunta importante: ¿cuándo y cómo lo generas?

Un enfoque es generar todo el audio con antelación y servirlo como archivos estáticos. La ventaja es una reproducción instantánea, ya que el audio ya está en una CDN, y una calidad uniforme cada vez.

El inconveniente es el costo. Pagas por generar el audio de todo tu contenido, lo escuche alguien o no. Tienes que conocer todo tu contenido de antemano, lo que descarta el texto dinámico. Cada cambio de contenido pone en marcha un nuevo proceso de generación, y los costos de almacenamiento crecen con tu biblioteca.

La alternativa es generar el audio solo cuando un usuario lo solicita. Es más barato, porque solo pagas por el contenido que la gente realmente quiere escuchar, y funciona con contenido dinámico.

Sin embargo, sigues necesitando proteger tu presupuesto de generación. Un acceso sin restricciones a una API de TTS significa que cualquiera podría desencadenar generaciones costosas. Necesitas una forma de controlar quién recibe audio con IA y cuándo.

TTS2Go adopta un enfoque inteligente que equilibra calidad, costo y simplicidad.

Añades el SDK a tu sitio con una clave de API de frontend. La clave de API 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, no un secreto.

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.

Puedes entrar en tu panel de TTS2Go y aprobar esa solicitud 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, ya que solo pagas por el audio que realmente quieres.

Una vez que la solicitud se aprueba y se genera, todos los usuarios que pulsen TTS en ese mismo contenido escucharán audio con IA de alta calidad con la voz que hayas elegido. El audio queda en caché en la CDN de TTS2Go, así que la reproducción es instantánea.

Esto significa que tu primer visitante tiene una experiencia funcional con el TTS del navegador, tus costos de generación se controlan mediante la aprobación y todos los demás reciben audio con IA premium sin costo adicional.

Instala el paquete de React de TTS2Go en el directorio de tu proyecto:

npm install @tts2go/react

El paquete es ligero, pesa menos de 15 KB comprimido con gzip y no tiene más dependencias peer que React.

Envuelve tu aplicación con TTS2GoProvider en la raíz de tu árbol de componentes. Pasa tu clave de API y el ID de tu proyecto en la configuración.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

Usa el hook useTTS en cualquier componente para obtener los controles de reproducir, pausar y detener. También puedes usar directamente el componente TTSButton ya preparado para mostrar un icono de altavoz en un momento.

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

El primer usuario que pulse reproducir escuchará el TTS del navegador mientras se envía una solicitud de generación a tu panel de TTS2Go. Una vez aprobada, todos los usuarios siguientes escucharán el audio con IA.

Explora la selección de voces, la compatibilidad con SSML para afinar la pronunciación y la API de resaltado, que sincroniza el texto en pantalla con las palabras habladas.

Consulta la documentación completa de React en tts2go.com/docs/react para ver patrones avanzados y ejemplos.