Cómo añadir texto a voz a Svelte

Svelte se basa en la simplicidad y el rendimiento, y añadir texto a voz (TTS) a una app de Svelte puede ser igual de sencillo.

Tanto si quieres que tu contenido sea más accesible, crear una experiencia de lectura en audio o añadir respuestas por voz, el TTS se puede integrar en minutos. Esta guía explica cómo funciona la síntesis de voz del navegador, las ventajas y desventajas de los distintos enfoques de TTS y cómo poner en marcha TTS2Go en tu proyecto de Svelte.

Los navegadores modernos incluyen la Web Speech API, que te permite llamar a window.speechSynthesis.speak() con un SpeechSynthesisUtterance para leer texto en voz alta.

Características principales:

• Sin dependencias: todo se ejecuta en el navegador.
• Sin claves de API ni llamadas al servidor: no requiere integración con un backend.
• Sin costo: usa las voces integradas del sistema.

Sin embargo, tiene sus desventajas:

• Calidad robótica e irregular: las voces suelen sonar sintéticas.
• Depende de la plataforma: las voces cambian entre Chrome y Firefox, o entre macOS y Windows.
• Pocas opciones de voz: menos idiomas y estilos que el TTS moderno con IA.

Los modelos neuronales de texto a voz producen audio de sonido natural, con una entonación y un ritmo realistas. Admiten muchos idiomas, acentos y estilos de voz, lo que los hace ideales para narraciones y experiencias de voz con calidad de producción.

Ventajas y desventajas:

• Ventajas:
• Audio natural y de alta calidad
• Amplia cobertura de idiomas y voces
• Sonido uniforme en todos los dispositivos y navegadores
• Desventajas:
• Costo: pagas por carácter o por segundo de audio generado.
• Llamadas a la API: requiere una integración del lado del servidor o una integración autenticada del lado del cliente.

Esto plantea una cuestión de diseño: ¿cómo equilibras la calidad del audio con los costos de generación y controlas cuándo se crea el audio?

Un enfoque es pregenerar el audio de todo tu contenido y alojarlo en una CDN.

Cómo funciona:

• Conviertes todo el contenido de texto en archivos de audio por adelantado.
• Subes esos archivos y los sirves desde una CDN.
• Los usuarios disfrutan de una reproducción instantánea, sin esperas de generación.

Ventajas:

• Reproducción instantánea para todos los visitantes
• Audio uniforme y de alta calidad
• Comportamiento sencillo en tiempo de ejecución (solo hay que reproducir un archivo)

Desventajas:

• Pagas por generar audio de contenido que quizá nunca se reproduzca.
• Todo el contenido tiene que conocerse de antemano.
• Cualquier cambio en el contenido obliga a regenerarlo.
• Los costos de almacenamiento y de CDN crecen con el volumen de contenido.

Con contenido dinámico o que se actualiza a menudo, esto se vuelve rápidamente caro y pesado de operar.

Otra estrategia es la generación bajo demanda (diferida), en la que el audio solo se crea cuando un usuario pulsa reproducir.

Cómo funciona:

• Cuando un usuario solicita el audio de un contenido, llamas a la API de TTS.
• El audio generado se guarda en caché o se almacena.
• Las solicitudes posteriores reutilizan el audio en caché.

Ventajas:

• Mucho más rentable: solo pagas por el contenido que los usuarios realmente escuchan.
• Admite de forma natural el contenido dinámico y el generado por usuarios.
• Reduce las generaciones desperdiciadas en contenido que nadie usa.

Retos:

• Sin controles, cualquiera podría desencadenar generaciones costosas.
• Necesitas una forma de decidir qué contenido recibe audio y cuándo.
• Tienes que equilibrar la experiencia de usuario (la espera inicial) con el control del presupuesto.

TTS2Go combina el TTS del navegador y el TTS con IA para equilibrar calidad, costo y simplicidad.

Ideas clave:

1. Una clave segura en el cliente

• Añades el SDK de TTS2Go a tu sitio con una clave de API de frontend.

Instala el paquete de Svelte de TTS2Go:

npm install @tts2go/svelte

El paquete funciona con Svelte 5 y se integra de forma natural con el modelo de reactividad de Svelte.

Inicializa un cliente de TTS2Go con las credenciales de tu proyecto. En Svelte puedes crear el cliente directamente en un componente o en un módulo compartido.

import { createTTS2GoClient } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

• apiKey: tu clave pública de TTS2Go, segura para usar en el frontend.
• projectId: identifica qué proyecto de TTS2Go se usa para la generación, las aprobaciones y las analíticas.

Usa createTTS para obtener un store reactivo con los controles de reproducción y el estado.

import { createTTS2GoClient, createTTS } from "@tts2go/svelte";

const client = createTTS2GoClient({

apiKey: "your-api-key",

projectId: "your-project-id",

});

const VOICE_ID = "your-voice-id";

const text = "Hello from TTS2Go in Svelte!";

const tts = createTTS(client, text, VOICE_ID);

let status = $state("idle");

const unsubscribe = tts.status.subscribe((s) => (status = s));

function handleClick() {

if (status === "playing" || status === "fallback") {

tts.stop();

} else {

tts.play();

}

A partir de aquí puedes:

• Explorar la selección de voces para adaptarla a tu marca o tipo de contenido.
• Usar SSML para tener un control preciso sobre la pronunciación, las pausas y el énfasis.
• Integrar la API de resaltado de texto para sincronizar el texto con el audio hablado.

Para ver la documentación completa de Svelte y ejemplos avanzados, visita:

• https://tts2go.com/docs/svelte