Reto #2 - Music MP3 Player

Reproductor de MP3 con Javascript

Reto #2 - Music MP3 Player

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 tres 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. Al pasar a otra canción, se procederá a prepararla.
  • 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️⃣ Una barra inferior marcará el progreso de la canción. Al pulsar sobre ella, se saltará al instante correspondiente.
  • 6️⃣ En la zona inferior del art-box deben aparecer el momento de reproducción actual y la duración de la canción.
  • 7️⃣ Bajo los minutos y segundos, existirá un medidor de volumen «fake», activo mientras se esté reproduciendo la canción.
  • 8️⃣ Un botón desplegará la lista de canciones, que pulsando sobre ellas se podrá saltar a la canción en cuestión.

Si no lo has leído aún, echa un vistazo al ¿Cómo empezar?, un documento donde damos algunas pautas para comenzar, y un listado de recursos, sitios webs o herramientas que te ayudarán en tu proceso.

Requisitos

  • Nombre del repo: manzdev-retos-mp3-player 🐈 Crea tu repo pulsando aquí ❓ ¡Ayuda! ¿Cómo empiezo?
  • Sin framework: El objetivo de este reto es practicar Javascript vanilla, preferiblemente con pequeñas funciones.
  • Usa iconos SVG: Aunque se podrían utilizar librerías como Font Awesome, recomendamos usar SVG.
  • Tipografías alojadas: Puedes usar tipografías de Google Fonts, pero alójalas en tu propio proyecto.
  • Librerías externas: Utiliza la API multimedia nativa, no es necesario usar librerías externas.

Temas relevantes

Recursos proporcionados

Pistas (¡Estoy bloqueado!)

Pista 1: Estructura HTML

Puedes intentar partir de una estructura similar a esta:

Estructura HTML

Pista 2: Funciones

Una forma sencilla de abordar problemas de programación es seguir la filosofía de Divide y vencerás. Aconsejo seguir un enfoque de separación en funciones que solo aborden un objetivo principal. Por ejemplo, definir las funciones prev(), next(), play(), pause(). Si detectamos que queremos hacer algo que no entra dentro del objetivo de estas funciones, lo incorporamos en una nueva función y así vamos separando sus objetivos y abordando pequeñas tareas para completar la tarea global.

Pista 3: Audio

Probablemente, la forma más sencilla de abordar el mecanismo de audio es crear una etiqueta <audio> en el DOM desde Javascript. Esto lo puedes hacer con document.createElement(). Luego, cada vez que quieras reproducir una canción, modificas el atributo src para que apunte a la nueva canción. De este modo sólo tendrás cargada una canción a la vez.

Pista 4: Eventos

Es posible que necesitemos eventos multimedia específicos para detectar situaciones concretas. Por ejemplo, en los elementos multimedia existe un evento llamado ended que se dispara cuando termina de reproducirse un elemento multimedia. Esto nos puede servir para detectar cuando se debe saltar a la siguiente canción. De la misma forma, tendremos que buscar un evento específico cuando el tiempo de reproducción se actualice (un evento que se dispara continuamente mientras se reproduce la canción). Dicho evento lo usaremos para actualizar el tiempo de reproducción y el medidor «fake» de volumen.

DigitalOcean
Tabla de contenidos