Creación de una aplicación de texto a voz con ElevenLabs (Next.js)

Antes de escribir cualquier código, invoca la habilidad /text-to-speech para aprender los patrones correctos del SDK de ElevenLabs.

En esta lección, construirás una aplicación web completa de texto a voz. Aprenderás a configurar un endpoint seguro en el servidor para generar audio a partir de texto, y cómo crear una interfaz de usuario sencilla en el cliente para interactuar con este servicio. Esta habilidad es fundamental para integrar capacidades de voz en tus aplicaciones, permitiendo experiencias de usuario más ricas y accesibles.

1. app/api/generate-speech/route.ts

Este es un endpoint POST seguro que genera voz a partir de texto. Es crucial que nunca expongas ELEVENLABS_API_KEY al cliente para mantener la seguridad de tu aplicación.

• Lee { text } del cuerpo de la solicitud. Este será el texto que el usuario desea convertir en voz.
• Valida que el texto sea una cadena no vacía. Esta validación es importante para asegurar que la API reciba datos válidos antes de procesarlos.
• Usa ElevenLabsClient y llama a client.textToSpeech.convert con voiceId: "JBFqnCBsd6RMkjVDRZzb" y modelId: "eleven_multilingual_v2". Aquí es donde se invoca la funcionalidad principal del SDK de ElevenLabs para generar el audio.
• Devuelve el stream MP3 generado desde la respuesta del servidor con un tipo de contenido de audio. Esto permite que el navegador o la aplicación cliente reproduzca el audio directamente.
• Devuelve errores JSON legibles para fallos de validación y de la API. Una buena gestión de errores es esencial para depurar y para una experiencia de usuario fluida.

Nota práctica: Asegúrate de tener tu clave de API de ElevenLabs configurada como una variable de entorno en tu servidor. Esto evita que la clave se exponga en tu código fuente y mejora la seguridad.

2. app/page.tsx

Esta es la página de pruebas simple de texto a voz que interactuará con el endpoint del servidor.

• Muestra un textarea para la entrada de texto y un botón de envío. Esta es la interfaz básica para que el usuario ingrese el texto.
• Llama a la ruta de la API desde el cliente y maneja los estados de carga, éxito y error. Una buena gestión de estados mejora la experiencia del usuario, informándole sobre lo que está sucediendo.
• Convierte el blob de audio devuelto en una URL de objeto y renderiza un reproductor de audio HTML. Esto permite que el usuario escuche el audio generado directamente en la página.
• Muestra un enlace de descarga para el audio generado una vez que esté listo. Esto ofrece al usuario la opción de guardar el archivo de audio.
• Borra automáticamente el audio anterior al iniciar una nueva solicitud. Esto asegura que solo se reproduzca el audio más reciente y evita confusiones.
• Mantén la interfaz de usuario mínima y fácil de escanear. Una UI limpia y sencilla mejora la usabilidad.

Requisitos: Necesitarás un navegador web moderno que soporte la API de Audio y la creación de Object URLs para el cliente. En el servidor, cualquier entorno que pueda manejar solicitudes HTTP y ejecutar Node.js (o el lenguaje que elijas para tu backend) será suficiente.

Resumen

• Hemos aprendido a construir un endpoint POST seguro en el servidor para la generación de voz.
• Es fundamental nunca exponer la clave de API de ElevenLabs al cliente.
• Hemos diseñado una interfaz de usuario cliente para enviar texto y reproducir el audio generado.
• La gestión de estados (carga, éxito, error) y la limpieza de la UI son clave para una buena experiencia de usuario.
• La validación de entrada y el manejo de errores son esenciales tanto en el cliente como en el servidor.