Comunidad de diseño web y desarrollo en internet

Reproductor de audio con HTML5 y Javascript

Hola gente, como están? Aquí les dejo un pequeño reproductor de audio que hice con HTML5 y javascript. Bien, primero que nada veamos la parte de HTML5:

Código :

<!DOCTIPE html>
<html lang="es">
<head>
<script language="javascript" type="text/javascript" src="funcionesReproductor.js">
</script>
</head>
<body>
   <div id="reproductorBox">
   </div>
   <select  id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
      <option path="E:\Musica\El cuarteto de Nos\Invierno del 92 - El Cuarteto de Nos.mp3">Invierno del 92</option>
      <option path="E:\Musica\El cuarteto de Nos\El día que Artigas se emborrachó.mp3">El dia que artigas se emborachó</option>
      <option path="E:\Musica\El cuarteto de Nos\El Cuarteto De Nos - Nada Es Gratis En La Vida.mp3">Nada es gratis en la vida</option>
      <option path="E:\Musica\El cuarteto de Nos\el cuarteto de nos - miguel gritar(7).mp3">Miguel Gritar</option>
   </select>
   <script>cargarReproductor();</script>
</body>
</html>


Como verán, las rutas a canciones que usé para probarlo están incluidas directamente en el código, en el futuro pienso mejorarlo y hacer algún tipo de base de datos donde guarde las rutas, pero como esto es un ejemplo no afecta en mucho ^^

Básicamente lo que se tiene son dos partes principales, una que contiene el reproductor y otra para la lista de temas a pasar.


  • El tag <audio> está dentro del div por un tema de orden simplemente, sino al cambiar de canción cambiaría su posición relativa al select, pero lo veremos un poco mas adelante en la parte de javascript.

  • Dentro del <select>, cada option tiene un atributo path, para que almacene la ruta a la canción.

  • La función cambiarTrack() es llamada en el evento onClick, esta función la veremos mas adelante, pero básicamente, es la encargada de cambiar la canción, por eso es que se le pasa el <option> que está actualmente seleccionado.

  • Y al final de todo podrán ver que se llama a una función cargarReproductor(), se lo ubica debajo porque se necesita que esté toda la página cargada para que funcione.


Ahora la parte del javascript:

Código :

function cambiarTrack(track) {
   var path =  track.getAttribute("path")
   viejo_audio = document.getElementById("reproductor")

   audio_padre = viejo_audio.parentNode
   audio_padre.removeChild(viejo_audio)

   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")
   nuevo_audio.setAttribute("autoplay", "autoplay")

   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")

   nuevo_audio.appendChild(source)
   audio_padre.appendChild(nuevo_audio)
}

function cargarReproductor() {
         var select = document.getElementById("selectTrack")
         var path = select.options[0].getAttribute("path")

   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")      
      
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")

   nuevo_audio.appendChild(source)

   padre = document.getElementById("reproductorBox")
   padre.appendChild(nuevo_audio)
}


Bien, aquí tenemos las dos funciones:


  • cambiarTrack: lo que hace es recibir el track (track es pista en inglés para el que no sepa), que no es nada más que el option seleccionado. De él, obtiene su atributo path y lo que hace es crear un elemento audio, asignarle el path al source, remover el audio antiguo e insertar éste.

    Luego hay algunos detalles como el atributo autoplay que solamente hace que comience a reproducirse al ser seleccionado.

  • cargarReproductor: lo que hace es cargar una canción al reproductor al abrir la página. Su código es muy similar al de cambiarTrack


Y bueno, eso es, básicamente, cómo se puede hacer un reproductor de audio con html5 y javascript, espero que les haya gustado.

Aquí está el repositorio en github.

Espero mejorarlo en el futuro, así que si les interesó o piensan que lo pueden mejorar ustedes, siéntanse libres de hacerle un fork ^^

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate