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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
@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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
//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.
