Reproductor de audio con HTML5 y Javascript
[Link]
Olvidaste tuusuario o clave?
o registrate Tutoriales Cursos Videotutoriales Comic
Te puede i
Foros
Blog
Publica un tutorial
Qu es Cristalab?
T ags
Ejemplos
Tutoriales / Reproductor de audio con HTML5 y Javascript
Reproductor de audio con HTML5 y Javascript
Por leojg el 01 de Marzo de 2012 con 6,833 visitas HTML, CSS y Javascript Otros tutoriales por leojg.
Hola gente, como estn? Aqu les dejo un pequeo reproductor de audio que hice con HTML5 y javascript. Bien, primero que nada veamos la parte de HTML5:
Cdigo :
Regresar a
<!DOCTIPE html> <html lang="es"> <head> <script language="javascript" type="text/javascript" src="[Link]"> </script> </head> <body> <div id="reproductorBox"> </div> <select id = "selectTrack" multiple onchange="cambiarTrack([Link][[Link]]);"> <option path="E:\Musica\El cuarteto de Nos\Invierno del 92 El
1 de 6
06/12/2012 11:35 a.m.
Reproductor de audio con HTML5 y Javascript
[Link]
Cuarteto de Nos.mp3">Invierno del 92</option> "E:\Musica\El cuarteto de Nos\El da que Artigas se Te puede interesar El dia que artigas se emborach</option> "E:\Musica\El cuarteto de Nos\El Cuarteto De Nos Audio en HTML5 cross-browser con Nada es gratis en la vida</option> [Link] "E:\Musica\El cuarteto de Nos\el cuarteto de nos Miguel Gritar</option>
La etiqueta Audio en HTML5
</script>
Sabes y amas HTML 5, CSS y JS? Participa en este debate
Color, transparencia y texturas con Canvas en vern, Javascript ComoHTML5 ylas rutas a canciones que us para probarlo estn incluidas directamente en el cdigo, en el futuro pienso mejorarlo y hacer algn tipo de base de datos donde guarde las Men con sonido en HTML5 y jQuery
rutas, pero como esto es un ejemplo no afecta en mucho Bsicamente Flash se tiene son dos partes principales, una que contiene el reproductor y otra El futuro de lo que
Plugin de jQuery para validar formularios HTML5
est dentro del div por un tema de orden simplemente, sino al cambiar de cancin cambiara su posicin relativa al select, pero lo veremos un poco mas adelante en Logo de Android con Canvas en HTML5,
CSS3 y JS
Almacenamiento local en HTML5 , cada option tiene
un atributo path, para que almacene la ruta a la
Guardar en disco con HTML5 y Javascript: SessionStorage y LocalStorage
Regresar a los tutoriales
es llamada en el evento onClick, esta funcin la veremos mas adelante, pero bsicamente, es la encargada de cambiar la cancin, por eso es que se le que est actualmente seleccionado.
Y al final de todo podrn ver que se llama a una funcin cargarReproductor(), se lo ubica debajo porque se necesita que est toda la pgina cargada para que funcione.
Ahora la parte del javascript:
Cdigo :
function cambiarTrack(track) { var path = [Link]("path") viejo_audio = [Link]("reproductor") audio_padre = viejo_audio.parentNode audio_padre.removeChild(viejo_audio)
2 de 6
06/12/2012 11:35 a.m.
Reproductor de audio con HTML5 y Javascript
[Link]
Te puede interesar
createElement("audio") "id","reproductor") "controls", "controls") Audio en HTML5 cross-browser con "autoplay", "autoplay")
[Link]
La etiqueta Audio en HTML5
createElement("source") path) "audio/mpeg") "reproductorSource") source) nuevo_audio)
Sabes y amas HTML 5, CSS y JS? Participa en este debate
Color, transparencia y texturas con Canvas en HTML5 y Javascript
Men con sonido en HTML5 y jQuery
getElementById("selectTrack") options[0].getAttribute("path")
El futuro de Flash
createElement("audio") "id","reproductor") "controls", "controls")
createElement("source") path) Plugin de jQuery para validar formularios "audio/mpeg") HTML5 "reproductorSource")
Logo de Android con Canvas en HTML5, source) CSS3 y JS
getElementById("reproductorBox") nuevo_audio) Almacenamiento local en HTML5
Guardar en disco con HTML5 y Javascript: SessionStorage y LocalStorage
Regresar a los tutoriales
cambiarTrack: lo que hace es recibir el track (track es pista en ingls para el que no sepa), que no es nada ms 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 cancin al reproductor al abrir la pgina. Su cdigo es muy similar al de cambiarTrack
Y bueno, eso es, bsicamente, cmo se puede hacer un reproductor de audio con html5 y
3 de 6
06/12/2012 11:35 a.m.
Reproductor de audio con HTML5 y Javascript
[Link]
javascript, espero que les haya gustado.
Te puede interesar
Audio en HTML5 cross-browser con [Link] Espero mejorarlo en el futuro, as que si les interes o piensan que lo pueden mejorar ustedes, La etiqueta Audio en HTML5
Sabes y amas HTML 5, CSS y JS? Participa en este debate
A 8 personas les gusta esto. S el primero de tus amigos.
Color, transparencia y texturas con Canvas en HTML5 y Javascript
Envia un comentario (29)
Men con sonido en HTML5 y jQuery Barra de navegacin adaptable con Media Queries y JS El futuro de Flash
Plugin de jQuery para validar formularios HTML5
Logo de Android con Canvas en HTML5, CSS3 y JS
Almacenamiento local en HTML5
Anterior
Guardar en disco con HTML5 y Javascript:
Por [Link] SessionStorage y LocalStorageel 27 de Septiembre de 2012
Regresar a los tutoriales
Justo lo que necesitaba, estoy implementando un radio por internet y estaba buscando la forma de poner
Excelente aporte!!! Seria muy bueno mejorarlo con una base de datos. Voy que se puede hacer y si lo logro, con mucho gusto Saludos
4 de 6
06/12/2012 11:35 a.m.
Reproductor de audio con HTML5 y Javascript
[Link]
Te puede interesar
Por PercySL el 04 de Octubre de 2012
Audio en HTML5 cross-browser con
hola, [Link]
me gusto el post, tengo una curiosidad
Y como hago para que las rutas no se visualicen? hay alguna forma de ocultar o encriptar las rutas?
La etiqueta Audio en HTML5
gracias por el aporte y por tu respuesta.
Sabes y amas HTML 5, CSS y JS? Participa en este debate
Color, transparencia y texturas con Canvas
Por Ville el 23 de en HTML5 y JavascriptOctubre de 2012
Yo tengo una HTML5 y jQuery Men con sonido endudita, actualmente
pues con el html5 es ms sencillo reproducir una cancin en la web, tu sc modificado? es decir, usamos las etiquetas <audio> y <source> en lugar de <select> y <option>, hago es muy experto en el tema. el tuyo y lo de la base de datos sera Muy bueno y beneficioso.
El futuro de Flash buen aporte PDTA. Muy
Plugin de jQuery para validar formularios HTML5
Por Android con Canvas en de 2012 Logo de Alxul el 27 de Octubre HTML5,
CSS3 y JS
Hola, esta muy bueno el ejemplo, me gustaria saber la manera de implementar el codigo js a unos botones caratula del disco de cada cancin ojala pudieras colaborarme con eso Almacenamiento local en HTML5
Guardar en disco con HTML5 y Javascript: SessionStorage y LocalStorage
Anterior
Regresar a los tutoriales
Publica tu comentario
Tu nombre: S respetuoso. S detallado. Tu comentario: No escribas con mayusculas ni como si fuera un SMS. Insultos, trolls y spammers son siempre eliminados. [b]negrita[/b] [img][Link] [url=direccion]tu enlace[/url]
o puedes...
No ests regis
5 de 6
06/12/2012 11:35 a.m.
Reproductor de audio con HTML5 y Javascript
[Link]
Te puede interesar
Audio en HTML5 cross-browser con [Link]
Tutoriales de Flash
Ejemplos .fla
Anime
Videotutoriales
Cursos
Curso de Flash
La etiqueta Audio en HTML5
Sabes y amas HTML 5, CSS y JS? Participa en este debate
Color, transparencia y texturas con Canvas en HTML5 y Javascript
Men con sonido en HTML5 y jQuery
El futuro de Flash
Plugin de jQuery para validar formularios HTML5
Logo de Android con Canvas en HTML5, CSS3 y JS
Almacenamiento local en HTML5
Guardar en disco con HTML5 y Javascript: SessionStorage y LocalStorage
Regresar a los tutoriales
6 de 6
06/12/2012 11:35 a.m.