Beatpoints

Beatpoints reproduce música desde Spotify y la acompaña con una escena 3D que reacciona a la canción. La idea era usar los datos de análisis de audio que ofrecía la API de Spotify (pulsos, subdivisiones, secciones, volumen y energía) para que la animación siguiera la estructura real del tema, no solo el volumen.

• Login y reproducción: autenticación OAuth con Spotify a través de un servidor propio en Express, que intercambia y renueva los tokens. La reproducción usa el Web Playback SDK, por eso requiere cuenta Premium.
• Visualización: dos nubes de puntos (2.000 y 3.200) con shaders GLSL propios sobre React Three Fiber. Una pulsa con los beats y la otra con los tatums; la amplitud de cada pulso depende del volumen de la sección y su duración, de la energía de la canción.
• Sincronía: los pulsos se animan con Tween.js y se programan contra el tiempo de reproducción, compensando pausas.
• Letras: visualización estilo karaoke con letras sincronizadas desde una API propia.

Fue un proyecto completo de punta a punta: cliente, servidor y API de letras. En noviembre de 2024 Spotify dejó de ofrecer los endpoints de análisis de audio a las aplicaciones en modo desarrollo, de los que depende toda la visualización, así que la versión en línea ya no funciona como se ve en el vídeo. El proyecto queda como registro del trabajo.