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.
Quizás para el playlist se puede generar el listado de archivos con PHP con un foreach en un directorio con cada canción. Igual se pueden agregar a una base de datos y generar el listado. Usar JSON para mejor control o simplemente hacer un listado de archivos en un "txt".
Gracias por compartir.
Por vonnuman el 02 de Marzo de 2012
Por @uno_u_dos el 02 de Marzo de 2012
revisa un poco los tutos de clab para agarrarle la mano al formato y demás.
espero uno próximo!
Por greatmenjmt el 02 de Marzo de 2012
@Kinduff : Si, mi idea mas adelante es hacer un script que cargue los options.
@vonnuman: Como dijeron mas arriba el tag <audio> permite reproducir sonido sin ningun tipo de plugins
Por javier el 05 de Marzo de 2012
El plugin flash puede convertirse tranquilamente en un navegador flash y añadirle un plugin para interpretar html o podria existir un nevagador solo para js sin necesidad de html.
Todos sabemos el concepto de plugin pero este concepto puede veriar dependiendo de la perspectiva y el contexto en el que se trate. si esta dentro del navegador es un plugin pero si lo sacamos fuera del navegador y lo convertimos en un navegador ya no es un plugin.
Los navegadores son un plugin del S.O que interpretan html y no tienen porque ser el padre de todo.
Podrian existir otras tecnologias para interpretar otros tipos de archivos mucho mas eficaces que el html o codigo js. un plugin puede existir para complementar ciertas faltas de otra tecnologia pero cuando un plugin es autosuficiente y cubre cualquier problema tecnico que se nos podria presentar en un desarrollo web, tecnicamente no puede considerarse un plugin.
Tenemos el concepto que un navegador de html es el papa original y que todo lo que no se haga directamente con html es un plugin y eso no es así. Imaginad un navegador que desde sus origenes solo interprete archivos de 3dstudio max adaptados para web, si luego queremos que interpete ademas html y js los considerariamos un plugin?
Desde el punto de vista del navegador, que está hecho para interpretar html y javascript de forma nativa, sin ningún tipo de agregado, en ese caso se dice que no se necesita ningún plugin
Entendamos agregado como algo que introduce/instala el usuario a la versión final del navegadr, osea, aquella que fue liberada como "estable" por el equipo responsable de su desarrollo.
Yo podria poner perfectamente el javascript y el html en el mismo documento y funcionaria igual, se lo importa por una cuestión de orden solamente.
Si queres hacer un navegador que soporte flash nativo, hacelo, nadie te detiene
Por Javier el 06 de Marzo de 2012
Por HaroldV el 07 de Marzo de 2012
HaroldV-blog :
Usa rutas absolutas, no tiene nada que ver con que sea linux. Mueve tu archivo mp3 del apestoso Daddy Yankee en donde tengas tu archivo html y agrega solamente el nombre del archivo, porque está en la misma carpeta.
También puedes probar lo que dice @kinduff
Por HaroldV el 07 de Marzo de 2012
Por HaroldV el 07 de Marzo de 2012
Esto ocurre porque el codec usado en el ejemplo funciona solo para chrome. En firefox hay que usar otro cuyo nombre ahora no recuerdo.
HaroldV-blog :
Lee lo que escribí y hazlo, si no, no te va a funcionar.
jseros :
Porque no existe un formato estandar y cada navegador usa el codec(attributo tipo) que se le canta.
Lo correcto es tener almenos dos src, con la misma ruta pero distinto codec.
Por lo que he estado investigando se necesita un archivo formato .ogg o algo asi para que funcione en firefox.
http://support.mozilla.org/es/questions/758978
Ahi lo explican, basicamente, hasta que no se llegue a un estandar aceptado por todos se va a tener que hacer el doble de trabajo y usar el doble de espacio en el disco para reproducir audio(y video).
Un saludo
jseros :
Un saludo
No, porque sucede lo siguiente.
Si se quita solo el source el tag audio por alguna razón no se actualiza. Por eso es necesario eliminar todo el tag y su contenido y crear uno nuevo.
leojg :
Se llama caché y lo tiene tu navegador.
Por evergarza el 17 de Marzo de 2012
Por algharetehxx el 10 de Mayo de 2012
Por Virginia Cortez el 18 de Agosto de 2012
Por cholemon el 22 de Agosto de 2012
Por Germana.Fernandez el 27 de Septiembre de 2012
Excelente aporte!!!
Seria muy bueno mejorarlo con una base de datos. Voy que se puede hacer y si lo logro, con mucho gusto lo comparto
Saludos
Por PercySL el 04 de Octubre de 2012
Y como hago para que las rutas no se visualicen? hay alguna forma de ocultar o encriptar las rutas?
gracias por el aporte y por tu respuesta.
Por Ville el 23 de Octubre de 2012
PDTA. Muy buen aporte el tuyo y lo de la base de datos sería Muy bueno y beneficioso.
Por Alxul el 27 de Octubre de 2012
Por jhonny el 18 de Marzo de 2013
Por juanito el 13 de Octubre de 2013
Por juanito el 13 de Octubre de 2013
Por Gonzo el 07 de Mayo de 2014
Por Oswal el 19 de Junio de 2014
Por andres el 12 de Diciembre de 2014
Por Fer Ortiz el 29 de Febrero de 2016
Por devWithProblems el 14 de Abril de 2016
Por deve=8 el 27 de Mayo de 2016
Por Javier el 06 de Julio de 2016
Desde ya gracias por la ayuda!!!!