En esta ocasión vamos a implementar un Sistema Reproductor de Musica Responsive HTML CSS & JavaScript con el que fácilmente puedes escuchar tus canciones desde cualquier lugar, sin complicaciones.
Esta aplicación esta hecha en Vanilla Javascript, sin ningún framework adicional, CSS puro y HTML.
Este software se puede implementar fácilmente a nivel local, basca con descargar los archivos y luego reproducir el archivo index.html, que se abrirá en el navegador por defecto de tu ordenador.
Esta es una de mis aplicaciones gratuitas te recomiendo mucho ingreses por mi apartado gratuito donde tengo más aplicaciones Javascript, en Python y PHP, en el siguiente enlace puedes encontrar estas aplicaciones:
https://configuroweb.com/tag/gratis/
Video Explicativo
Demo del Sistema Reproductor de Musica Responsive HTML CSS & JavaScript
Está aplicación se subió a GitHub Pages, el enlace donde puedes probar la aplicación es el siguiente:
https://configuroweb.github.io/reproductor-musica/index.html
Si deseas saber como subir una aplicación a GitHub Pages puedes ver su documentación oficial en el siguiente enlace:
Explicación del Reproductor de Musica en JavaScript
El sistema fue desarrollado con HTML, CSS y Javascript, toda la lógica de aplicación reposa sobre el documento script.js, que se encuentra en la siguiente ubicación si deseas mirarlo con mayor detenimiento:
https://github.com/configuroweb/reproductor-musica/blob/master/src/script.js
Este archivo tiene un array llamado playlist con unos json que tienen la información de las canciones a reproducir, en sus atributos llave y valor consta de la llave title con el título de la canción, y la llave audio con la ruta donde debe estar el archivo correspondiente.
La aplicación utiliza la librería de jquery en adición para su óptimo funcionamiento, es muy fácil de cambiar su aspecto desde el archivo style.css que puede verificar en el siguiente enlace:
https://github.com/configuroweb/reproductor-musica/blob/master/src/style.css
Desde este documento es muy fácil cambiar el fondo, las imágenes de fondo y el avatar que en este ejemplo está con el logo de este blog ConfiguroWeb.
Descarga he implementación del proyecto en JavaScript
El siguiente es el enlace del repositorio donde tengo el proyecto colgado en GitHub:
Como es una página estática, no se requiere utilizar un backend, no debes instalar ningún servidor basta con descargar el proyecto y ejecutar la página index.html
Subida del Sistema Reproductor de Musica Responsive HTML CSS & JavaScript
En una publicación previa explico como subir un proyecto similar a este a GitHub Pages. Si deseas subirlo a un hosting como hostinger en el siguiente vídeo explico la forma de hacerlo:
Cualquier duda quedo al pendiente !!
