Hola y bienvenid@s a este tutorial en donde te enseñaré como crear un reproductor de música con JavaScript, HTML5 y CSS, aprenderemos a usar HTML5 CSS y JavaScript y ponerlos todos juntos para construir un pequeño reproductor de música. Este reproductor de música es una excelente manera de ver cómo podemos trabajar no solo con JavaScript sino que también con elementos de audio de html5.
Comenzaremos creando la interfaz de usuario usando HTML para mostrar el audio predeterminado reproductor y una lista de nuestras canciones, luego vamos a eliminar todos los controles predeterminados proporcionados por los elementos de audio HTML y empezaremos a crear nuestra propia versión personalizada del reproductor, después de esto pasamos a agregar el estilo usando CSS para que nuestra aplicación se vea mucho mejor.
Finalmente nos centraremos en crear todas las funcionalidad al reproductor mediante el lenguaje JavaScript. La aplicación tendrá una lista de canciones a la cual haremos clic para reproducir, cuando la música se reproduce podremos ver: el título de la canción que se está reproduciendo actualmente, una barra de progreso, el tiempo de duración de la canción en curso, también vamos a crear la funcionalidad para que los controles nos permitan pausar, reproducir, dar en click para ver la pista siguiente o la pista anterior e incluso vamos a controlar el volumen. Bueno, no me enredo más y empecemos:
1- Encontrar canciones para usar en nuestra aplicación
Lo primero que haremos para construir nuestra aplicación es descargar los archivos de audio para poder trabajar con nuestro reproductor de música para ello vamos a ir a el sitio web llamado bensound.com y descargar los archivos que consideremos necesarios para usar en el proyecto. En el directorio de nuestro ordenador vamos a crear una carpeta llamada music y dentro de dicha carpeta, otra carpeta llamada audio. En esta última carpeta es donde vamos a guardar todos los archivos descargados, pues lo utilizaremos mas adelante.
2- Crear la estructura HTML
Luego de haber descargado los archivos de audio vamos a proceder con la creación de un archivo llamado index.html, dicho archivo lo debemos guardar dentro de la carpeta music (creada en el paso anterior). Copia y pega el código siguiente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reproductor de música JavaScript</title> <link href="style.css" rel="stylesheet"> <!--load all styles --> <link href="fontawesome/css/all.css" rel="stylesheet"> <!--load all styles --> <script defer src="fontawesome/js/all.js"></script> <!--load all styles --></head> <body> <!-- Autor: Obed Alvarado Web: obedalvarado.pw Mail: info@obedalvarado.pw --> <audio id="player" ontimeupdate="updateProgress();"> <source id="source"> Audio no soportado </audio>
<div id="controls"> <div class="timer" id="timer"> </div> <div class="volumen"> Vol: <i class="fas fa-volume-down"></i> <input type="range" name="volumen" id="volumen" min="0" max="1" step="0.01" value="0.75"> <i class="fas fa-volume-up"></i> </div>
<i class="fas fa-backward fa-5x" onclick="prevMusic();"></i> <i class="far fa-play-circle fa-5x" onclick="togglePlay();" id="iconPlay"></i> <i class="fas fa-forward fa-5x" onclick="nextMusic();"></i> <br> <span id="currentPlay"></span><br> <progress id="progress" value="0" max="100" ></progress>
<h3>Mi música</h3> <div id="playList"></div>
</div> </div>
<p>Créditos de música: <a href="https://www.bensound.com/">https://www.bensound.com/</a></p>
<script type="text/javascript" src="script.js"></script> </body> </html>
3- Descargar los iconos de font awesome
Ahora debemos descargar los iconos de font awesome y colocarlos en un directorio llamado "fontawesome", este directorio debe estar dentro de music que es la carpeta principal de nuestro proyecto. La url de descarga de fontawesome es la siguiente: https://fontawesome.com/
4- Añadir estilos con CSS
Vamos a crear un nuevo archivo en el directorio principal y lo nombraremos style.css y colocaremos el código css:
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body{
background: linear-gradient(to right, #6c5ce7 , #e84393);
font-family: 'Lato', sans-serif;
font-size: 1.3em;
width: 50%;
margin: 15px auto;
padding: 20px;
text-align: center;
min-height: 50vh;
}
#playList{
background: white;
border-radius: 10px;
text-align: left;
opacity: 0.8;
color: #e84393;
}
li{
padding: 10px;
}
li:hover, svg:hover {
cursor: pointer;
color: #e84393;
}
li.active{
color: #6c5ce7;
}
#controls{
border: 1px #eee solid;
border-radius: 10px;
padding: 10px;
background: white;
opacity: 0.8
}
svg{
color: #6c5ce7
}
progress{
width: 80%;
margin: 10px;
opacity: 0.5;
}
.timer{
width:50%;
position: relative;
top:10px;
left:0px;
text-align:left;
float:left;
color: #6c5ce7;
}
.volumen{
width:50%;
position: relative;
top:10px;
right:0px;
text-align:right;
float:left;
color: #6c5ce7;
margin-bottom:20px;
}
#currentPlay{
color: #6c5ce7
}
h3{
color: #e84393;
margin:0px;
}
5- Añadiendo interacción al reproductor usando Javascript
Es este paso vamos a crear un nuevo documento en el directorio principal y lo nombraremos script.js, el cual se encargará de crear todas las funciones necesarias para la interacción de nuestro reproductor de música haciendo uso de todas las bondades que nos ofrece JavaScript. Copia y pega el siguiente código:
//Array con el listado de canciones a mostrar en el reprodutor
const canciones = [
"bensound-summer.mp3",
"bensound-anewbeginning.mp3",
"bensound-creativeminds.mp3",
"bensound-house.mp3",
"bensound-littleidea.mp3",
"bensound-ukulele.mp3",
"bensound-happyrock.mp3"
]
var indiceActual = new Array(1)
//Funcion para crear mediante javascript el listado de canciones
function crearPlayList(){
const listado = document.createElement('ol')
listado.setAttribute("id", 'listadoMusica')
for (let i = 0; i<canciones.length; i++){
const item = document.createElement('li')
item.appendChild(document.createTextNode(canciones[i]))
item.setAttribute("id", canciones.indexOf(canciones[i]))
listado.appendChild(item)
}
return listado
}
document.getElementById('playList').appendChild(crearPlayList())
var listadoMusica= document.getElementById('listadoMusica')
listadoMusica.onclick = (e) =>{
const itemClick = e.target
removeActive()
itemClick.classList.add("active");
reproduccionActual("Reproduciendo: "+ itemClick.innerText)
loadMusic(itemClick.innerText)
player.play()
indiceActual[0]= e.target.id
classIconPlay();
}
//Funcion para cambiar el icono del reprodutor
function classIconPlay(){
var element = document.getElementById("iconPlay")
element.classList.remove("fa-pause-circle");
element.classList.add("fa-play-circle");
}
//Funcion para control del volumen
const volumen= document.getElementById("volumen")
volumen.oninput= (e) =>{
const vol = e.target.value
player.volume =vol
}
//Funcion para actualizar la barra de progreso del reprodutor
const updateProgress = () =>{
if (player.currentTime >0){
const barra = document.getElementById('progress')
barra.value = (player.currentTime / player.duration) * 100
var duracionSegundos= player.duration.toFixed(0);
dura=secondsToString(duracionSegundos);
var actualSegundos = player.currentTime.toFixed(0)
actual=secondsToString(actualSegundos);
duracion= actual +' / '+ dura
document.getElementById('timer').innerText=duracion
}
if (player.ended){
nextMusic();//Reproducir la siguiente pista
}
}
//Funcion para reproducir la proxima cancion
function nextMusic(){
const source = document.getElementById('source');
var musicaActual= Number(indiceActual[0]);
if (canciones.length == (musicaActual+1)){
var siguiente = 0
} else {
var siguiente = musicaActual + 1
}
removeActive()
var item=document.getElementById(siguiente)
item.classList.add("active");
loadMusic(canciones[siguiente]);
player.play()
indiceActual[0]= siguiente
reproduccionActual("Reproduciendo: "+ canciones[siguiente])
classIconPlay()
}
//Funcion para reproducir la cancion anterior
function prevMusic(){
const source = document.getElementById('source');
var musicaActual= Number(indiceActual[0]);
if (musicaActual==0){
var anterior= canciones.length - 1
} else {
var anterior = musicaActual - 1
}
removeActive()
var item=document.getElementById(anterior)
item.classList.add("active");
loadMusic(canciones[anterior]);
player.play()
indiceActual[0]= anterior
reproduccionActual("Reproduciendo: "+ canciones[anterior])
classIconPlay()
}
//Funcion para remover todas las clases css activas
function removeActive(){
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
return elems
}
//Funcion para mostrar el nombre del arhivo actual en reproduccion
function reproduccionActual(texto){
document.getElementById('currentPlay').innerText=texto
}
//Funcion para cargar las canciones en el reproductor
function loadMusic(ruta){
var source = document.getElementById('source')
var folder ="audio";//Carpeta donde tenemos almancenada la musica
source.src= folder+"/"+ruta
var index= indiceActual[0]= canciones.indexOf(ruta)
removeActive()
var item=document.getElementById(index)
item.classList.add("active");
reproduccionActual("Reproduciendo: "+ ruta)
player.load()
}
//Funcion para pausar o darle play
function togglePlay() {
if (player.paused){
toggleIcon();
return player.play();
} else {
toggleIcon();
return player.pause();
}
}
//Funcion para cambiar el icono play o pause
function toggleIcon() {
var element = document.getElementById("iconPlay");
element.classList.toggle("fa-pause-circle");
element.classList.toggle("fa-play-circle");
}
//Funcion para que al dar click sobre la barra de progeso se permita adelantar
progress.addEventListener('click', adelantar);
function adelantar(e){
const scrubTime = (e.offsetX / progress.offsetWidth) * player.duration;
player.currentTime = scrubTime;
sonsole.log(e);
}
//Funcion para convertir segundos a minutos y horas
function secondsToString(seconds) {
var hour="";
if (seconds>3600){
hour = Math.floor(seconds / 3600);
hour = (hour < 10)? '0' + hour : hour;
hour+=":"
}
var minute = Math.floor((seconds / 60) % 60);
minute = (minute < 10)? '0' + minute : minute;
var second = seconds % 60;
second = (second < 10)? '0' + second : second;
return hour + minute + ':' + second;
}
loadMusic(canciones[0])
Hemos un reproductor de música con JavaScript, HTML5 y CSS. No olvides que puedes descargar los archivos fuentes y hacer tus pruebas.
VER DEMOSTRACIÓN DESCARGAR ARCHIVOS
Comentarios