29 de junio de 2026 · Claude · Astro · Supabase · Cloudflare R2
Cómo construí un reproductor de música con IA, de la idea a publicarloHow I built a music player with AI, from idea to publishing
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.The real process of building the WandaBuilds music player: the idea, the tools, the obstacles, and what AI did so I could publish it.
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.
One day I decided my site needed music. Not an embedded Spotify playlist, not a generic third-party widget. A player of my own, with my songs, my interface, my design. And I, who am not a software engineer, built it from idea to published with AI’s help.
Let me tell you exactly how it went.
Why a player of my own
WandaBuilds exists to prove that anyone can build things with AI, not just use apps others made, but create something of your own, with your rules. Music felt like the perfect test: it’s a real interface component, with state, with audio, with a database. There’s no more honest way to show this works than to show it working.
And since I built it without a programming background, I wanted that to be visible on the site.
The pieces of the system
Before writing a single line of code, I asked Claude to help me think through the architecture. That’s the first thing any builder does: understand what parts the system needs before building them.
The WandaBuilds player ended up like this:
- Supabase — the database where playlists and songs live, with title, artist, cover image, and audio reference.
- Cloudflare R2 — the storage where I keep the audio files. Think of it as Google Drive for code, but without the high costs of major cloud providers.
- Astro — the framework for the whole site, where the player component lives.
- Claude Code — the one that wrote most of the player’s code, the migration scripts, and the Supabase queries.
How I used AI in each part
The player component
I described to Claude what I wanted: a mini-player in the site’s footer, with play/pause controls, song navigation, and a progress bar. It asked me what framework I was using, how state worked on my site, what the visual style was. After that conversation, it gave me the component.
Did it work on the first try? Not entirely. I had to tell it what was breaking, what didn’t look right, how it interacted with the rest of the site. But that’s exactly what the process is: you iterate. It’s not instant magic, it’s fast collaboration.
The upload scripts
To upload songs to storage and register them in the database, I wrote some scripts with Claude. I explained the process in my own words: “I want to take an MP3 from this folder, upload it with this name, and save the title, artist, and public URL in the songs table”. Claude wrote the script. I tested it, told it what error came up, it fixed it. On the third try it worked.
The cover for each song
This was my favorite moment. Instead of searching Google Images, I generated the covers with Higgsfield: scene prompts that captured the mood of each playlist. Every song has its image. Every playlist has its album art. All on-brand, all consistent.
What surprised me about the process
The hardest part wasn’t writing code. It was describing precisely what I wanted.
When you tell AI “make me a music player”, the result is generic. When you say “I want a fixed mini-player in the footer that plays MP3s from a Cloudflare URL, with a next-song button, and the title shown on a single line with scroll if it’s too long”, the result is yours.
AI amplifies the clarity with which you think. Learning to describe what you want well is the most valuable skill of the modern builder.
What I learned from the process
You don’t have to understand all the code to build something that works. You have to understand what you want, know how to explain it clearly, and learn to read errors so you can tell the AI what went wrong.
That’s what being a builder today means: using the tools you have, iterating quickly, and shipping real things.
Can you build something like this?
Yes. Not the same player (that one already exists), but something of your own. A tool for your business, a component for your portfolio, a project you’ve been wanting to build and putting off because “you don’t know enough code.”
AI doesn’t ask you to know everything. Just to have the idea and the willingness to iterate until it works.
The player is already on WandaBuilds. Go to /music and listen. That’s what you can build.
¿Quieres ver estas herramientas comparadas a fondo? Pásate por las reseñas sin filtro. Want these tools compared in depth? Check the unbiased reviews.