Se pide desarrollar un reproductor de MP3 que permita reproducir canciones de una lista definida en un fichero JSON.
art-box
, (carátula de cada canción), controls-box
(reproducción y datos), y un status-box
para colocar un mensaje.art-box
aparecerá el momento de reproducción actual y la duració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 y herramientas que te ayudarán en tu proceso.
manzdev-retos-mp3-player
🐈 Crea tu repo pulsando aquí ❓ ¡Ayuda! ¿Cómo empiezo?350px
(reproductor), 275px
(playlist).350x350px
aprox.Roboto Flex
.Puedes intentar partir de una estructura similar a esta:
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.
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.
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.
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