Cómo construí un MP3 Tagger para web que lee la info desde Spotify

Otra vez me he liado: de ir a buscar una cosa a acabar haciendo una mini app para que resuelva todas las cosas en un solo sitio. Pero todo ha sido por encontrar nada más que muros y muros y muros. Así que me he hartado y me he puesto a resolver mi problema cómo sé: programando.

La problemática

Como os he comentado en otro tweet, he encontrado un recopilatorio de 1999 que tiene los mejores temas. Hablando con mi padre, los dos hemos llegado a la conclusión que hay que conservarlo (y mi padre ya ha planeado hacer una sesión).

Estos discos, a lo mejor, existieron físicamente en 1999. Pero la compañía que los tiene ahora, Djs Tracks Records, los publicó online en 2022. No os miento: los he buscado para comprar. Los compraba de cabeza. Pero solo están en plataformas online…

Por supuesto, ya hay apps y cosas para «pinchar» sesiones con Spotify, pero nosotros somos clásicos y nos gusta guardarlo en nuestro NAS para tenerlos ahí y moverlos, generar nuevos planes para sesiones, etc…

Hay unas listas de reproducción oficiales en YouTube para poder escucharlas y disfrutarlas. Por alguna extraña razón, han aparecido los ficheros de audios en mi PC. Revisaré el antivirus por si acaso. Aquí las tenéis:

Bueno, pues ya que están los ficheros aquí, habrá que hacer algo. No sé. Como ponerle nombres y carátulas para que estén ordenados. Por eso de preservarlos y conservarlos de la mejor manera.

Las soluciones que existen pero no me han ayudado

Si tuvisteis una buena infancia con un iPod o érais unos locos de tener un MP3/MP4 físico, sabréis los que es el MP3 Tagging. Para el que no lo sea, es añadirle toda la información posible al fichero: título, artista, número, album, carátulas y hasta lyrics.

Los viejos o los que usamos el formato local (no streaming) seguimos usando programas como MusicBrainz Picard, MP3Tag, iTunes, One Tagger.

Todo esto funciona muy guay. Cada uno tiene su base de datos propia, algunos permiten leer de Discogs, otros leen de muchas bases a la vez. Pero, con los «virus» que yo tengo, esa etiqueta digital no es válida para encontrar las canciones en MusicBrainz o Discogs.

Entonces, no podría encontrar la info en esas plataformas para taggear toda la info en los ficheros, como siempre. Además, como os he dicho antes, esto es una publicación digital: ni MusicBrainz ni Discogs lo tienen dado de alta. ¿Quién sí? El encantador y estúpido Spotify.

¿Por qué lo insulto si tiene lo que quiero? Porque Spotify es un servicio que tiene limitadas las consultas. Todos estos programas tienen plugins hechos por la comunidad (que abandonan por cansancio) o no hay forma de pasarle la URL de la info directa. Así que no hay forma…

Al menos no hay una forma de:

  • te doy la URL de la info de Spotify
  • te paso los ficheros
  • añades toda la info de tags
  • me cambias los nombres de ficheros
  • me pones la portada
  • me voy a dormir feliz

Muro.

Por supuesto, me he ido a la mejor comunidad de locos del mundo: Github. Allí hay muchos proyectos pero que ninguno me ha dado lo que necesitaba fácilmente… O estaban hechos en Java y no funcionaban. Estaban obsoletos. Abandonados. Dejado pendiente… Muro tras muro.

Y aquí me encuentro… solo, triste, abandonado por el mundo tagger y con 134 canciones con títulos muy feos y horribles. Sin artistas, sin nada…

Me pongo triste cada vez que veo estas cosas tan feas…

Pero me han parido con tres defectos: demasiada empatía, lógica nula y querer resolver problemas hasta que ya no me queden fuerzas.

¿Podemos solucionarlo?

Pero espera… ¿qué es eso? ¿infinitos recuerdos mentales de cosas que no sirven de nada? Le he dado mucho a TamperMonkey, que era un plugin de navegador web para inyectar ficheros Javascript para «arreglar» o añadir funcionalidades temporales a ciertas webs. Muy útil.

Y me pregunto… ¿Un navegador web podrá editar los datos/tags de un fichero MP3? ¿Renombrar ficheros sin subirlos a ningún servidor? ¿Descargarse los ficheros ya modificados con portada y todo? Porque lo único que sé es que con la URL de Spoti, tengo toda la info.

Y lo que más rabia/miedo me da: Tengo mucha experiencia con la API de Spotify. Sé lo que necesito. Cómo lo necesito. ¿Podré «vibe codear» esta herramienta así por los jajas? Como no tengo ni idea de si funcionará al 100%… al menos crear un prototipo rápido a ver…

Pues… he podido. Funciona. El monstruo de FrankenAdam está vivo. Me cago en la mar… Me gusta la IA tanto como la odio. Pero tiene sus campos de uso correctos/buenos, pero muchos usados muy mal. Al menos, aquí, no hago daño a personas. (Pero un par de litros de agua sí…)

El prototipado de la idea

Así que nos ponemos técnicos un rato y luego os pongo fotitos y vídeos para los no técnicos. Pues a lo sencillo:

  • Vite (para build, desarrollo, server de la API de Spoti para no exponer cosas…)
  • React / JS (no me meto en TS para una demo) – Tailwind (diseño rápido)

Para el tema de modificar los ficheros, he hecho una mezcla entre varias librerías:

  • browser-id3-writer: Escritura de tags ID3v2 en los MP3 (título, artista, álbum, año, pista, carátula) en el navegador.
  • music-metadata-browser: Lectura de metadata y tags existentes.
  • jsmediatags: Lectura alternativa de tags en archivos de audio en el navegador
  • jszip: Creación de un ZIP con los MP3 etiquetados para descargar varios archivos en una sola descarga. Básicamente, todas mis dudas resultas y preparadas para trabajar.

Así que, después de una horita haciendo un prototipado, mejorando la interfaz, dándole info y pegándole latigazos a la IA… tenemos prototipo funcional. ¿Lo vemos? ¡Lo vemos!

El proyecto: Spotify MP3 Tagger

La aplicación que hemos generado. En ella se ve la app para añadir la URL de Spotify para cargar los datos.
La aplicación que hemos generado. En ella se ve la app para añadir la URL de Spotify para cargar los datos.

¿Cómo funciona?

Lo primero que hay que hacer es buscar la URL de Spotify y pegarla en la web para leer la info. Si copiamos esto en la app y le damos a Cargar, mostrará la info para comprobar si todo es correcto. Además, ya podremos arrastrar los ficheros feos para poder seguir trabajando.

Una vez arrastrados los ficheros, ya están listo para casar el fichero con lo descargado de Spotify. Lo veremos después.

(Sí, he cambiado de disco. El otro ya lo había procesado, jejeje)

Una vez cargada la info y los ficheros, se muestra un listado para unir canción de Spotify con canción en fichero.

Configuración

Antes de ponernos a tope con cómo funciona lo de los ficheros, también tenemos configuración básica. Por el momento, lo que necesito. Pero se podría ir mejorando. En este caso, le he añadido el cambio de nombre a los tipos de renombres que me hace falta.

Las opciones son:

  • No renombrar. (Por si quieres cambiarlo con otro programa)
  • Artista – Título
  • Número. Artista – Título
  • Número. Título
  • Disco-Número. Artista – Título
  • Disco-Número. Título

Vídeo de demostración

«Mucho texto, Adam. Cállate ya.» Venga, aquí un vídeo sin audio a tope de cómo va:

El resultado

Así que os pongo el antes y el después. Podemos darnos una palmadita en la espalda. Hemos conseguido lo que queríamos.

¿Lo publicaré?

Lo probaré un par de veces y, si me convence, puede que lo deje publicado como una app en el PC de Adam. En cuanto al código, quizás podría colgarlo público y a alguien le puede funcionar. Ya lo pensaré un día de éstos.

Me voy a dormir

Poco más que añadir. Al final del día, lo que queremos hacer solo podemos hacerlo si nos ponemos a ello. A lo mejor aquí tengo a gente que esto lo hace con el meñique, otros que le viene genial esto para tener ideas y, para todo lo demás, un poco lectura para dormir.

Así que, nada más por este tema, me despido y me piro a dormir… Menos mal que mañana es viernes.