Transcripción en Tiempo Real con ElevenLabs (Next.js)

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

En esta lección, construirás una aplicación web que permite transcribir audio en tiempo real desde un micrófono utilizando el servicio Scribe de ElevenLabs. Aprenderás a manejar tokens de seguridad, integrar el SDK de React de ElevenLabs y mostrar el estado de la transcripción de manera interactiva. Esta habilidad es fundamental para crear asistentes de voz, aplicaciones de toma de notas o cualquier sistema que requiera procesar voz en vivo.

1. app/api/scribe-token/route.ts

Este es un endpoint GET seguro que devuelve un token Scribe de un solo uso para la transcripción en tiempo real.

Es crucial que este endpoint se implemente en el lado del servidor para proteger tu clave API. Nunca expongas ELEVENLABS_API_KEY al cliente, ya que esto comprometería la seguridad de tu cuenta.

Este token es necesario para autenticar la conexión con el servicio Scribe de ElevenLabs y garantizar que solo las aplicaciones autorizadas puedan acceder a la transcripción en tiempo real.

2. app/page.tsx

Esta sección describe la página de transcripción de micrófono en tiempo real que construirás en el frontend.

Aquí es donde la magia sucede en el lado del cliente, utilizando el SDK de React de ElevenLabs para interactuar con el micrófono y el servicio de transcripción.

• Utiliza el hook de scribe en tiempo real del SDK de React de ElevenLabs con la estrategia de commit VAD (Voice Activity Detection). Esto permite que la transcripción se envíe en segmentos significativos, mejorando la eficiencia y la precisión.
• Obtén un token nuevo de la ruta de la API en cada inicio (los tokens son de un solo uso). Esto asegura que cada sesión de transcripción esté debidamente autenticada y que los tokens expirados no causen problemas.
• Muestra un interruptor de Inicio/Parada, el estado de la conexión, una forma de onda en vivo (usa LiveWaveform de components/ui), la transcripción parcial y el historial de transcripciones confirmadas (la más reciente primero). Estos elementos proporcionan una interfaz de usuario clara y retroalimentación visual al usuario.
• Mantén el historial confirmado entre paradas/arranques; borra el estado transitorio al desconectarse. Esto mejora la experiencia del usuario al preservar el contexto de la conversación.
• Maneja los errores de conexión de forma elegante y permite la reconexión. Es importante que la aplicación sea robusta y pueda recuperarse de interrupciones de red o del servicio.

Para esta sección, asegúrate de tener configurado tu entorno de desarrollo React y de haber instalado el SDK de ElevenLabs para React. También necesitarás una clave API de ElevenLabs, que se utilizará en tu endpoint seguro del servidor.

Resumen

• Construiste un endpoint seguro para generar tokens de transcripción de un solo uso.
• Aprendiste a proteger tu clave API de ElevenLabs manteniéndola en el servidor.
• Implementaste una interfaz de usuario de transcripción en tiempo real con React y el SDK de ElevenLabs.
• Manejaste el estado de la conexión, la visualización de la forma de onda y el historial de transcripciones.
• Aseguraste la robustez de la aplicación manejando errores y permitiendo la reconexión.