Construye un cambiador de 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.

1. app/api/voice-changer/route.ts

Endpoint POST seguro que acepta audio grabado en el navegador a través de FormData, lo convierte usando speech-to-speech y devuelve el audio transformado.

• Lee ELEVENLABS_API_KEY de process.env. Devuelve 500 si falta.
• Acepta audio (File), voiceId (string) y el opcional modelId (string, por defecto eleven_multilingual_sts_v2) del FormData de la solicitud.
• Devuelve 400 si falta audio o voiceId.
• Llama a elevenlabs.speechToSpeech.convert(voiceId, { audio, modelId, outputFormat: "mp3_44100_128" }).
• Recopila el stream devuelto en un Buffer y responde con el tipo de contenido audio/mpeg.
• Envuelve en try/catch y devuelve un error JSON en caso de fallo.

2. app/api/voices/route.ts

Endpoint GET seguro que devuelve la lista de voces disponibles.

• Llama a elevenlabs.voices.getAll().
• Devuelve voices como un array JSON con los campos voiceId, name y previewUrl.

3. app/page.tsx

Página de cambio de voz con grabación en el navegador, selección de voz, conversión y reproducción de audio.

• Obtén las voces de /api/voices al montar y rellena un selector desplegable.
• Voz predeterminada: JBFqnCBsd6RMkjVDRZzb (George).
• Cuatro estados de UI: inactivo, grabando, listo para convertir y convirtiendo.
• Grabación: usa navigator.mediaDevices.getUserMedia({ audio: true }) y MediaRecorder (prefiere el tipo mime audio/webm).
• Muestra un botón prominente de "Grabar". Mientras grabas, muestra el tiempo transcurrido y un indicador rojo pulsante. Muestra un botón de "Detener" para finalizar la grabación.
• Después de detener, crea una URL de objeto para la grabación original y renderiza un reproductor <audio> para que el usuario pueda previsualizarlo antes de convertir.
• Mantén el selector de voz visible, pero deshabilitado hasta que haya una grabación disponible. Habilítalo después de que la grabación se detenga.
• El botón "Convertir Voz" debe permanecer deshabilitado hasta que tanto una grabación como una selección de voz estén disponibles.
• Al enviar, haz un POST de FormData con el audio grabado como audio, más voiceId y modelId, a /api/voice-changer. Dale a la grabación un nombre de archivo como recording.webm.
• Muestra un spinner de carga durante la conversión.
• En caso de éxito, crea una URL de objeto a partir del blob de respuesta y renderiza un segundo reproductor <audio> etiquetado como "Audio Convertido" con controles.
• Si el usuario cambia la voz seleccionada después de una conversión, trata el resultado convertido como obsoleto y permítele hacer clic en "Convertir Voz" nuevamente para generar una versión nueva de la misma grabación.
• Muestra un enlace de "Descargar" para el archivo convertido.
• Muestra un botón de "Grabar de Nuevo" para borrar ambos reproductores de audio y empezar de nuevo.
• Muestra los errores en línea. Maneja la denegación de permisos de micrófono con elegancia. Limpia las pistas de medios y revoca las URL de objeto cuando se reemplacen o al desmontar.