¡DIY con IA! Tu propio concierto desde el navegador: Crea un reproductor MP3 portable con IA en un instante

Hoy te voy a mostrar cómo crear un reproductor MP3 funcional que vive en un solo archivo HTML. No necesitas ser programador, no necesitas instalar nada complicado. Solo necesitas curiosidad y ganas de experimentar.

¿Por qué crear tu propio reproductor cuando ya existe Spotify?

La pregunta es válida. Ya usas Spotify, YouTube Music o el reproductor de tu teléfono. Pero hay algo mágico en crear algo que es completamente tuyo:

• Es tu laboratorio personal: Puedes experimentar, modificar colores, añadir funciones raras o quitarlas. Es como tener tu propio taller digital.

• Funciona en cualquier parte es portable: Un solo archivo que puedes llevar en un pendrive, enviar por email o abrir en cualquier navegador. Sin instalaciones, sin cuentas, sin internet.

• Es el primer paso hacia algo más grande: Mi primer proyecto con IA fue exactamente esto. Ahora creo herramientas más complejas porque perdí el miedo a "hablar" con la inteligencia artificial.

Fíjate que es importante decirle que no empiece a programar porque por ejemplo Claude enseguida se lanza a programar. Queremos evitar esto porque queremos tener control por ver qué cosas debe incluir. A partir de la explicación de los fundamentos técnicos y de la lista de funcionalidades que se pueden desarrollar ya estaremos en condiciones de generar la primera versión del reproductor.

🎬 Conversación 2: Pidiendo el Primer Borrador

Tu siguiente mensaje:

La conversación mágica: Cómo "Hablar" con la IA para que programe por ti

Aquí viene la parte divertida. Vamos a tratar a nuestra IA favorita (ChatGPT, Claude, Gemini, Copilot) como un compañero de programación muy capaz. La clave está en llevar una conversación natural, no en soltar un prompt gigante.

🎬 Conversación 1: Presentando la idea

Tú dices:

Tanto ChatGPT, como Gemini, como Claude tienen la función de "canvas" que consiste en dividir la pantalla en dos partes, dejando a la izquierda la conversación que está teniendo con nosotros, y poniendo en el panel de la derecha, el canvas, el código que está generando. Durante unos instantes veremos como la IA genera todo el código que le hemos pedido.

Yo siguiendo esta estrategia con los tres, ChatGPT, Gemini y Claude y tras alguna iteración para pedirle más funcionalidad he conseguido tres versiones diferentes totalmente operativas.

🛠️ De la conversación al reproductor: los pasos prácticos

1. Abre tu IA favorita y comienza una conversación como la que te mostré arriba.

2. Copia el código que te genere en tu primera petición.

3. Guárdalo como mi_reproductor.html (la extensión .html es crucial) Cladue en su canvas ya incluye la opción de descargarlo como html directamente.

4. Ábrelo haciendo doble clic (se abrirá en tu navegador)

5. Pruébalo con una canción MP3.

6. Regresa a la IA si algo no funciona como esperas.

⚠️ Si algo no funciona...

¿El botón de pausa no responde? ¿La barra de progreso se ve rara? ¡Perfecto! Es parte del proceso. Simplemente vuelve a la IA y dile exactamente qué no está funcionando. Algo como:

"El botón de play no cambia a pausa cuando la música está sonando. ¿Puedes revisar esa parte del código?"

La IA se encargará de solucionarlo. Este proceso de ida y vuelta es donde más aprendes sobre cómo funcionan las cosas.

En mi caso, cuando estaba trabajando en la versión de Claude tuve que decirle: "Está bastante bien pero presente un problema; cuando ya has seleccionado una canción y quieres seleccionar otra el control de reproducción deja de funcionar. ¿Puedes arreglarlo?" Y claro que lo arregló.

🚀 Ideas para evolucionar tu creación

¿Te ha picado el gusanillo? Aquí tienes ideas para seguir conversando con la IA:

• "¿Puedes hacer que recuerde el último volumen que usé?"

• "Me gustaría poder cargar varias canciones y crear una lista de reproducción"

• "¿Podrías cambiar los colores para que se vea más como Spotify?"

• "¿Es posible añadir un ecualizador básico?"

Cada una de estas ideas puede ser una nueva conversación con tu asistente de IA. Si te fijas en la versión que hice con Gemini, incluye un montón de cosas más que en el resto, básicamente porque iteré más veces y le fui pidiendo más cosas, como por ejemplo la visualización de la onda de sonido que se adapta a lo que está sonando.

🎵 Tu turno de componer

¿Te atreves a crear tu reproductor MP3 en los próximos 30 minutos?

Aquí está tu reto para esta semana:

1. Crea tu reproductor básico siguiendo la conversación que te mostré

2. Añade al menos una función extra conversando con la IA

3. Comparte una foto de tu creación usando #MiReproductorIA

Bonus: Si logras que reproduzca tu canción favorita, ¡ya tienes algo que ninguna plataforma de streaming puede darte: la satisfacción de haber creado tu propia pieza de tecnología!

¿Qué función extra te gustaría añadir a tu reproductor? ¿Un cambiador de velocidad? ¿Efectos de sonido? ¡Cuéntanos en los comentarios qué ideas tienes!

¿Construiste tu reproductor? ¡Queremos verlo! Etiquétanos en Instagram con #CuriosidadArtificial.es