Reproductor MP3 ▷ 【HTML CSS JavaScript 】GRATIS sin Pluggins y paso a paso.
Hola amigos hoy vamos a hacer un reproductor MP3 para tu blog solo utilizando HTML, CSS y JavaScript, pero tranquilo, vamos a hacerlo paso a paso y si no sabes nada de codigo, este reproductor de MP3 es la excusa perfecta para aprender.
Como Hacer un reproductor HTML con JavaScript de MP3
Lo primero que hay que saber es que vamos a hacer codigo, no vamos a utilizar pluggins ni extenciones, no tengas miedo, esto es muy facil y lo mejor..seguro.
Como Hacer un reproductor de audio MP3 en HTML
Lo primero que debemos hacer es crear una etiqueta de audio esto se hace con el siguiente codigo de HTML:
"<audio></audio>"
El siguiente paso es colocar el atributo "SRC" o source, el cual es el link del archivo de audio o de MP3.
"<audio src="aqui va la URL"></audio>"
Y listo en lo que se refiera a HTML ya hemos terminado. Asi de simple, pero no se mostrara el audio, esto porque no le hemos dicho que lo haga, pero no lo vamos a mostrar.
Esto se debe a que con CSS, osea el estilo, lo vamos a esconder y mostrar otro elemento, que va a cumplir la funcion de reproductor.
Para esto debemos agregar una ultima cosa, un ID o identificador a nuestro archivo de audio, esto se hace asi:
"<audio id="audio" src="aqui la URL del audio"></audio>"
Por ultimo debemos colocar el boton de play y pause, en mi caso tengo unas imagenes que puedo usar, en codigo quedaria asi:
"
<div class="reproductor">
<audio id="audio" src="aqui la URL del audio"></audio>
<img src="http://simpleicon.com/wp-content/uploads/play1.png" id="btn"/>
</div>
"
Le he agregado una propiedad ID llamada "btn", esto para poderlo seleccionar con JavaScript.
Agregando JavaScript al reproductor de MP3 en HTML
Debemos seleccionar el boton de play para que tenga la funcion de pausa y play, para esto abrimos una etiqueta de Script:
"<script></script>"
Dentro de ella escribirmos el siguiente comando (sin las comillas):
"
document.getElementById("btn").addEventListener("click", ()=>{
document.getElementById("audio").play()
})"
Verificamos que funcione, pero necesitamos que reprodusca la cancion o que la pause, para esto debemos preguntarle, esto lo hacemos con una condicional.
Nuestro codigo de JavaScript quedaria asi:
"
document.getElementById("btn").addEventListener("click", ()=>{
if(document.getElementById("audio").paused){
document.getElementById("audio").play()
}else{
document.getElementById("audio").pause()
}
})
"
Ahora ya podemos pausar y reproducir el MP3 desde el Html y con JavaScript, ahora toca dar los estilos.
Reproductor HTML, JavaScript con CSS
Para esto vamos a "copiar" un estilo parecido al de Spotify pero un poco mas nuestro.
Para esto abrimos una etiqueta Style y copiamos el siguiente codigo:
<style>
.reproductor{
width: 200px;
height: 200px;
background: #814fd1;
}
.reproductor img{
width: 50px;
}
.hidden{
display: none;
}
</style>
Ahora para que el boton cambie de Play a Pause, vamos a usar un metodo de JavaScript que permite agregar o eliminar un clase, para esto debemos crear un DIV o contenedor con el ID de "btn" y dentro de el colocamos las imagenes de los botones.
Ahora si no haz entendido nada, te recomiendo que veas el tutorial en video que tengo en mi canal de Youtube.
Codigo Final en HTML, CSS y Javascript del reproductor de MP3
El codigo final del reproductor es el siguiente:
<div class="reproductor">
<audio id="audio" src="https://firebasestorage.googleapis.com/v0/b/escuela-32bef.appspot.com/o/podcast%2Fla-psicofonia-del-infierno-7-11-2010-1-hora417295.mp3?alt=media&token=05a8d55e-835c-47b6-a548-64742865cc19">
</audio>
<div id="btn">
<img id="play" src="http://simpleicon.com/wp-content/uploads/play1.png" />
<img class="hidden" id="pause" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-pause-512.png" />
</div>
</div>
<script>
console.log(document.getElementById("audio"))
document.getElementById("btn").addEventListener("click", ()=>{
if(document.getElementById("audio").paused){
document.getElementById("audio").play()
document.getElementById("play").classList.add("hidden")
document.getElementById("pause").classList.remove("hidden")
}else{
document.getElementById("audio").pause()
document.getElementById("play").classList.remove("hidden")
document.getElementById("pause").classList.add("hidden")
}
})
</script>
<style>
.reproductor{
width: 200px;
height: 200px;
background: #814fd1;
}
.reproductor img{
width: 50px;
}
.hidden{
display: none;
}
</style>
Solo copias y pegas para probar el funcionamiento. En mi canal de Youtube voy a mejorarlo y a hacer un Spotify que funcione de manera dinamica, suscribete para no perderte el tutorial.
Dale Play para ver como funciona...
