Volver a proyectos
Web App

LyricFlow

Reproductor de música web con letras sincronizadas en tiempo real y visualizador de espectro de audio

Next.js 16React 19Tailwind CSS 4shadcn/uiWeb Audio API

Qué resuelve

  • Necesidad de un reproductor de música web con letras sincronizadas en tiempo real.
  • Soporte para múltiples pistas de letras (original, traducción, etc.).
  • Visualización del espectro de audio con múltiples modos y temas.

Características clave

  • Letras sincronizadas en tiempo real con optimización de búsqueda binaria.
  • Múltiples pistas de letras (original, traducción, etc.) mediante track_order.
  • Estilo por línea (color, tipografía, sombras, gradientes, transiciones).
  • Visualizador de espectro de audio con 3 modos (barras, onda, espejo).
  • 6 temas visuales predefinidos + importación de tema personalizado vía JSON.
  • Fondos por canción (color sólido, modo dinámico, imagen o video).
  • Panel de playlist con búsqueda y navegación.
  • Soporte de subida de archivos locales (audio + JSON) directamente desde el navegador.
  • Pipeline de importación de canciones con integración LRCLIB.
  • Obtención automática de letras y generación de song.json.

Decisión técnica

  • Separar la lógica de reproducción de la UI para facilitar testing y mantenimiento.
  • Usar Web Audio API para el visualizador de espectro en tiempo real.
  • Priorizar la experiencia de usuario con sincronización precisa de letras.