Aquí puedes ver recursos del resultado del ejercicio →
Ejercicio: Music MP3 Player
Nombre repo:mp3-player

Reproductor de MP3 javascript con playlist y seguimiento interactivo de la canción.

Descripción

Se pide desarrollar un reproductor de MP3 que permita reproducir canciones de una lista definida en un fichero JSON.

  • 1️⃣ El reproductor se divide en 3 secciones principales: el art-box, (carátula de cada canción), controls-box (reproducción y datos), y un status-box para colocar un mensaje.
  • 2️⃣ El reproductor debe cargar sólo una canción a la vez.
  • 3️⃣ Los botones deben aparecer cuando sea posible usarlos. Si no hay canción posterior, aparecerá en gris, desactivado. Si la canción está reproduciendo, sólo se verá botón de pausa. Si la canción está pausada, sólo se verá botón de play.
  • 4️⃣ Al terminar una canción, se debe saltar automáticamente a la siguiente disponible.
  • 5️⃣ La barra inferior marca el progreso de la canción. Al pulsar sobre ella, se saltará al segundo exacto.
  • 6️⃣ En la zona inferior del art-box aparecerá el momento de reproducción actual y la duración.
  • 7️⃣ Abajo, existirá un medidor de volumen animado «fake», cuando reproduce una canción.
  • 8️⃣ Un botón desplegará la lista de canciones, que permiten saltar a la canción en cuestión.

Recursos

Links

Volver

Demos desde cero

En mi canal de Youtube encontrarás demos y ejercicios desde cero:

Videos de Youtube

En mi canal de Youtube encontrarás videos con conceptos de desarrollo web:

Dibujos con CSS

Estos dibujos que tenemos a continuación están hechos con CSS... ¿No te lo crees?

Más Dibujos con CSS.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev