Reproductor de Música Responsive HTML CSS & JavaScript

Reproductor de Musica Responsive HTML CSS & JavaScript

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://www.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:

https://pages.github.com/

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:

https://github.com/configuroweb/reproductor-musica
Reproductor de Musica Responsive HTML CSS & JavaScript

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:

Subir pagina con PHP + Base de datos (MYSQL) a un Hosting

Cualquier duda quedo al pendiente !!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.