Una cara animada (un avatar) que lee un texto moviendo la boca, para presentaciones, cursos online o vídeos explicativos. Escribes lo que quieres que diga y el avatar lo narra sincronizando los labios.
Objetivos de aprendizaje
Qué es la sincronización labial y cómo se consigue.
Combinar voz sintética (TTS) con una cara animada.
Generar clips para tus materiales educativos.
Conceptos clave
Este proyecto une dos cosas que ya conoces o casi: la voz sintética (TTS, del capítulo de audio) y una cara animada que mueve la boca al ritmo de esa voz.
En cristiano: sincronización labial (lip sync). Es hacer que los movimientos de la boca coincidan con los sonidos. El programa analiza el audio, detecta qué sonido toca en cada instante y coloca la forma de boca correspondiente. El resultado: parece que el avatar habla de verdad.
Idea clave. No necesitas ser diseñador. Puedes empezar con un avatar 2D sencillo (una cara con unas pocas formas de boca) y queda sorprendentemente bien para cursos.
En cristiano: visemas (las “formas de boca”). Un visema es la forma que adopta la boca para un sonido. No hay una por letra: muchos sonidos comparten forma (la “m”, la “b” y la “p” cierran los labios igual). Con apenas 8–12 dibujos de boca bien elegidos se cubre el habla entera. El programa decide, sonido a sonido, qué visema mostrar. Por eso un avatar convincente es más sencillo de lo que parece.
Cómo encaja con lo que ya sabes
Este proyecto es una extensión del capítulo de texto a audio: allí generabas la voz; aquí, además, la “pones en una cara”. Si aquel te funcionó, este es el siguiente escalón natural. La novedad es solo la capa visual: los visemas sincronizados con el audio que ya sabes producir.
Requisitos
Claude Code, Node.js y un motor de TTS local (Kokoro o MagpieTTS, del capítulo de audio). Puede requerir Python; Claude Code te guía.
Paso a paso
Terminal
cd ~/proyectos-ia
mkdir avatar-parlante
cd avatar-parlante
claude
Escribe esto a Claude Code
Crea una app web local de "avatar que habla":
- Escribo un texto y elijo idioma/voz.
- Genera la voz con Kokoro (TTS local).
- Muestra una cara 2D sencilla que mueve la boca sincronizada con el audio (lip sync).
- Botón para reproducir y para exportar el resultado como vídeo (o como audio + animación).
- README con instrucciones y cómo cambiar el avatar.
Idea clave.Ejemplo resuelto. Escribe como texto de prueba: “Hola, soy tu tutor virtual. Hoy veremos las fracciones.” Al generar, deberías oír esa frase y ver la boca abrirse en las vocales y cerrarse en la “m” de “soy”/“hoy”. Si la boca se mueve pero no coincide con las palabras, es cuestión de ajustar el desfase, no de que esté roto.
Cuidado.El error más común: el desfase. Es fácil que la boca vaya ligeramente adelantada o retrasada respecto a la voz. No lo tomes como un fallo grave: pide a Claude Code que “añada un pequeño ajuste (en milisegundos) para sincronizar la boca con el audio” y prueba valores hasta que cuadre. Un desfase de menos de una décima de segundo el ojo ni lo nota.
Ejecutar en tu ordenador
Terminal
npm install
npm run dev
Escribe una frase, genera y observa al avatar hablar.
Comprueba que funciona. Al reproducir, deberías oír la voz y ver la boca moverse acompasada. Si coinciden razonablemente, el lip sync funciona.
Guardar y reabrir el proyecto.
Proyecto: carpeta avatar-parlante. Cerrar: Ctrl + C. Reabrir: cd ~/proyectos-ia/avatar-parlante y npm run dev. Los vídeos que exportes se guardan como archivos independientes en tu ordenador.
Si algo falla
Boca desincronizada — pide a Claude Code que ajuste el desfase entre audio y animación.
No exporta vídeo — puede faltar una herramienta (por ejemplo, para unir audio e imágenes); Claude Code te dirá cuál instalar.
Voz robótica — cambia de motor TTS o de voz.
Reto para practicar
Enlaza el avatar con un modelo de Ollama: que el avatar responda a preguntas hablando, no solo lea un texto fijo. Habrás creado un tutor virtual con cara.