← Volver al blog

29 de junio de 2026 · Claude · Astro · Supabase · Cloudflare R2

Cómo construí un reproductor de música con IA, de la idea a publicarlo

Te cuento el proceso real de construir el reproductor de música de WandaBuilds: la idea, las herramientas, los obstáculos y qué hizo la IA para que yo pudiera publicarlo.

Cómo construí un reproductor de música con IA, de la idea a publicarlo

Un día decidí que mi sitio necesitaba música. No una playlist embebida de Spotify, no un widget genérico de terceros. Un reproductor propio, con mis canciones, mi interfaz, mi diseño. Y yo, que no soy ingeniera de software, lo construí de la idea a publicarlo con ayuda de IA.

Te voy a contar exactamente cómo fue.

Por qué un reproductor propio

WandaBuilds existe para probar que cualquiera puede construir cosas con IA, no solo usar apps que otros hicieron, sino crear algo tuyo, con tus reglas. La música se me hacía la prueba perfecta: es un componente de interfaz real, con estado, con audio, con base de datos. No hay forma más honesta de demostrar que esto funciona que mostrarlo funcionando.

Y si lo construí yo, que no tengo formación en programación, quería que eso fuera visible en el sitio.

Las piezas del sistema

Antes de escribir una sola línea de código, le pedí a Claude que me ayudara a pensar la arquitectura. Eso es lo primero que hace cualquier builder: entender qué partes necesita el sistema antes de construirlas.

El reproductor de WandaBuilds quedó así:

  • Supabase — la base de datos donde viven las playlists y las canciones, con título, artista, portada y referencia al audio.
  • Cloudflare R2 — el almacenamiento donde guardo los archivos de audio. Piénsalo como un Google Drive para código, pero sin los costos elevados de los grandes proveedores de nube.
  • Astro — el framework del sitio completo, donde vive el componente del reproductor.
  • Claude Code — el que escribió la mayoría del código del reproductor, los scripts de migración y las consultas a Supabase.

Cómo usé la IA en cada parte

El componente del reproductor

Le describí a Claude lo que quería: un mini-player en el pie de página del sitio, con controles de play/pausa, navegación entre canciones y una barra de progreso. Me preguntó qué framework usaba, cómo funcionaba el estado en mi sitio, cuál era el estilo visual. Después de esa conversación, me dio el componente.

¿Funcionó al primer intento? No del todo. Tuve que decirle qué fallaba, qué no se veía bien, cómo interactuaba con el resto del sitio. Pero eso es exactamente lo que hace el proceso: iteras. No es magia instantánea, es colaboración rápida.

Los scripts de subida

Para subir las canciones al almacenamiento y registrarlas en la base de datos, escribí unos scripts con Claude. Le expliqué el proceso con mis palabras: “quiero tomar un MP3 de esta carpeta, subirlo con este nombre y guardar en la tabla de canciones el título, el artista y la URL pública”. Claude escribió el script. Yo lo probé, le dije qué error salió, lo arregló. Al tercer intento funcionó.

Las portadas de cada canción

Este fue el momento favorito. En lugar de buscar imágenes en Google, generé las portadas con Higgsfield: prompts de escenas que capturaban el mood de cada playlist. Cada canción tiene su imagen. Cada playlist tiene su álbum. Todo on-brand, todo consistente.

Lo que me sorprendió del proceso

La parte más difícil no fue escribir código. Fue describir con precisión lo que quería.

Cuando le dices a la IA “hazme un reproductor de música”, el resultado es genérico. Cuando le dices “quiero un mini-player fijo en el footer que reproduzca MP3 desde una URL de Cloudflare, con un botón de siguiente canción y que el título se muestre en una sola línea con scroll si es largo”, el resultado es tuyo.

La IA amplifica la claridad con que piensas. Aprender a describir bien lo que quieres es la habilidad más valiosa del builder moderno.

Lo que aprendí del proceso

No tienes que entender todo el código para construir algo que funcione. Tienes que entender lo que quieres, saber explicarlo con claridad y aprender a leer los errores para decirle a la IA qué salió mal.

Eso es ser builder hoy: usar las herramientas que tienes, iterar rápido y publicar cosas reales.

¿Puedes hacer algo así?

Sí. No el mismo reproductor (ese ya existe), pero algo tuyo. Una herramienta para tu negocio, un componente para tu portafolio, un proyecto que llevas tiempo queriendo construir y posponiendo porque “no sabes programar suficiente”.

La IA no te pide que sepas todo. Solo que tengas la idea y las ganas de iterar hasta que funcione.

El reproductor ya está en WandaBuilds. Entra a /music y escúchalo. Eso es lo que se puede construir.


¿Quieres ver estas herramientas comparadas a fondo? Pásate por las reseñas sin filtro.