Implementación de doblaje 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.

Este ejemplo usa la API de Proyectos de Doblaje (dubbing v2): un proyecto contiene el medio fuente y su transcripción, y cada idioma objetivo produce una salida doblada en un solo idioma.

1. app/api/dubbing/route.ts

Endpoint POST seguro que inicia un proyecto de doblaje a partir de una grabación subida.

• Lee ELEVENLABS_API_KEY de process.env. Devuelve 500 si falta.
• Acepta audio (File), targetLang (string), y opcional sourceLang (string, predeterminado auto) de la solicitud FormData.
• Devuelve 400 si el audio falta o es inválido, o si falta targetLang.
• Usa ElevenLabsClient y llama a client.dubbing.project.create({ file: audio, targetLanguage: targetLang, sourceLanguage: sourceLang === "auto" ? undefined : sourceLang, reference: "Browser dubbing demo" }). El atajo targetLanguage también pone en cola un idioma objetivo que comienza a generarse automáticamente una vez que el proyecto termina de transcribir.
• Devuelve JSON { projectId, languageId }, leyendo languageId de project.languageIds?.[0] ?? null.
• Envuelve los fallos en errores JSON legibles.

2. app/api/dubbing/[projectId]/route.ts

Endpoint GET seguro que devuelve el estado combinado del proyecto y del idioma para el sondeo.

• Lee y valida projectId de los parámetros de la ruta.
• Llama a client.dubbing.project.get(projectId). Los estados del proyecto son queued, preparing, processing, ready, o failed.
• Si el proyecto tiene un idioma objetivo (project.languageIds?.[0]), también llama a client.dubbing.project.language.get(projectId, languageId). Los estados del idioma son queued, processing, completed, stale, o failed.
• Devuelve JSON con projectStatus, languageId, y languageStatus.
• Mantén la respuesta pequeña y amigable para el sondeo del cliente.

3. app/api/dubbing/[projectId]/audio/[languageId]/route.ts

Endpoint GET seguro que actúa como proxy de la salida de audio doblado.

• Lee y valida projectId y languageId de los parámetros de la ruta.
• Llama a client.dubbing.project.language.get(projectId, languageId). Una vez que el idioma es completed, outputs.losslessAudio contiene una URL de descarga firmada que expira después de aproximadamente una hora; al obtener el idioma de nuevo, se devuelve una nueva.
• Devuelve 503 con un error JSON legible si el idioma aún no es completed o no tiene una URL de salida.
• Obtén la URL firmada en el lado del servidor y transmite el cuerpo de vuelta con el tipo de contenido original (predeterminado audio/wav).

4. app/page.tsx

Grabadora de voz en el navegador y página de doblaje.

• Usa una lista de idiomas compacta y seleccionada en la página: auto para la detección de la fuente más inglés, español, francés, alemán, italiano, portugués, japonés, coreano e hindi.
• Graba desde el micrófono con navigator.mediaDevices.getUserMedia({ audio: true }) y MediaRecorder, usando un tipo mime compatible con el navegador (prefiere audio/webm;codecs=opus, luego audio/webm, luego audio/mp4).
• Después de detener, convierte el blob grabado a un WAV File en el navegador antes de subirlo. No envíes audio/webm;codecs=opus sin procesar a /api/dubbing, porque la API de Doblaje rechaza ese tipo de contenido.
• Muestra estados claros: inactivo, grabando, preparando, sondeando, listo y error. Mientras grabas, muestra el tiempo transcurrido y un indicador rojo pulsante.
• Después de grabar, muestra el reproductor de audio original más los selectores de idioma fuente y idioma objetivo. Evita elegir el mismo idioma fuente y objetivo explícito.
• Al hacer clic en Dub Recording, POST FormData con el archivo WAV convertido a /api/dubbing y guarda el projectId devuelto.
• Sondea /api/dubbing/${projectId} cada 5 segundos. Mientras sondeas, muestra "Transcribiendo tu grabación…" hasta que projectStatus sea ready, luego "Generando el audio doblado…". Detente con un error si projectStatus o languageStatus es failed.
• Cuando languageStatus sea completed, obtén /api/dubbing/${projectId}/audio/${languageId}, crea una URL de objeto y renderiza un reproductor <audio> doblado con controles más un enlace de descarga WAV.
• Muestra errores en línea para la denegación del micrófono, fallos de carga y fallos de doblaje.
• Mantén la interfaz de usuario mínima y fácil de escanear.