En la actualidad los dispositivos móviles son de uso frecuente entre los usuarios y como desarrolladores es inevitable pensar en ¿cómo se verá la página/aplicación en los distintos dispositivos móviles?.
De igual forma, el contenido multimedia (audio/vídeo) es de alto consumo en dichos dispositivos y es por eso que en algunos proyectos quizá lleguemos a necesitar de un reproductor de audio o vídeo. Debido a esto me di a la tarea de desarrollar un reproductor de audio compatible con todos los navegadores en sus versiones más recientes (sí, inclusive Internet Explorer 9), cuyo desarrollo he querido compartir con toda la gente que está deseosa de aprender a utilizar la API para contenido multimedia que se incluye en HTML5.
El tutorial está dividido en cinco partes debido a su extensión y para una mejor comprensión del tema, sin más, los dejo con el tutorial.
PARTE 1: HTML
Aquí simplemente haremos la estructura que tendrá nuestro reproductor, sin la necesidad de emplear imágenes o cosas por el estilo. Se hará uso de las nuevas etiquetas de semántica como lo son “section” y “article“.
PARTE 2: CSS
Escribiremos el código de CSS que nos permitirá personalizar nuestro reproductor utilizando nuevas características de CSS3 como son rgba() y border-radius, compatibles con todos los navegadores actuales.
PARTE 3: JS [1]
Crearemos la estructura básica del código JavaScript que utilizaremos y comenzaremos a reproducir un solo archivo de audio.
PARTE 3: JS [2]
Trabajaremos con el tiempo de reproducción y duración de nuestro archivo actual, esto con la finalidad de hacer funcionales las barras de estado y el tiempo.
PARTE 3: JS[3]
En la última parte agregaremos eventos a nuestros elementos de HTML5 para poder manipular el audio. (Detener, cambiar, pausar, reproducir, etc.)
El ejemplo lo puedes ver en http://labs.henocdz.com/theduxer/
Si te gustó compártelo en tus redes sociales y recuerda que puedes dejar tus dudas, sugerencias y comentarios aquí mismo.
Es te sitio esta muy bien
Hola Henoc, me podrías pasar la carpeta img, no t la qiero pirañar, solo necesito las imágenes como referencia para hacer los ajustes necesarios a 1 proyecto mío, x cierto gracias por el aporte, muy didáctico tus tutoriales, éxito en lo q emprendas!!
Hola Carlos, no hay problema por las imágenes, todo es libre 🙂
Puedes descargar las imágenes y el código en:
https://github.com/Roofdier/The-Duxer
Por ahí hay un botón que dice ZIP para que lo descargues.
Gracias, de igual forma espero que tengas éxito en tus proyectos.
Saludos!
oye, me meti en ese link y no aparece el codigo 🙁 , necesito hacer algo parecido rapidamente, pudieras ayudarme??
Hola, muy majo el reproductor.
Estoy tratando de insertar uno en mi web dándole otros estilos de color, pero al abrir el archivo theduxer.js en el dreamweaver CS5 me dice que tiene un error de sintaxis en la línea 254 en la que dice lo siguiente:
if(trackNum == (totalTracks-1) && loop = 1)
La verdad es que no tengo ni idea de por qué dice eso…
Si me puedes echar un cable….
Gracias
Saludos
Hola, primero que nada disculpa que conteste hasta el día de hoy pero el sistema no me había notificado tú comentario.
Respecto al error que mencionas, tienes razón, el error ahí fue mío lo que pasa en esa línea es un error de lógica, en la segunda parte de la condición "loop = 1" debe ser "loop == 1" ya que estoy evaluando y se van a repetir las canciones. Agregando otro signo igua se soluciona.
Gracias por la observación 😀
No logro que el loop funcione :(, termina la canción juaz no pasa más, que tendré mal 🙁
Checa bien tus condicionales y en el bloque de código donde se ejecutan las acciones en caso de que se tenga que volver a reproducir pon algún alert() o console.log() para ver si está entrando al bloque de código, si entra y no hace nada, alguna función está mal.
Saludos.
Hola Henoc,
Estoy intentando implementar este reproductor para un proyecto de audioguías de un pequeño museo arqueológico. Por ahora tan solo cambié un poquito el HTML y el CSS para añadir unas "tracks" y cambiar algunas imágenes de fondo y colores. En local todo funcionaba a la perfección, pero al subirlo a mi servidor me da el error de códec para cualquier pista y en cualquier navegador. Como puedo solucionar este problema?
Muchas gracias,
Podría ser la ruta del archivo que intentas cargas, intenta comprobar que la ruta que le indicas al Audio.src sea la correcta.
Hola Henoc,
He visto el reproductor y me a parecido genial. Te quiero preguntar si hay alguna manera de poder poner un codigo de audio con autoplay en HTML5 donde yo pueda poner la direccion de mi emisora y que emita el tipo de archivo m3U.
Tengo una web donde emito musica, osea una radio online,lo que quiero es que cuando se abra la web empiece a sonar la emisora de radio.
Un saludo y muchas gracias de antemano…
El soporte al formato de audio depende el navegador. He hecho pruebas de enlaces de streaming y funciona, pero no estoy seguro que formato sea el que manda en streaming.
Por cierto uso Safari.
Hola, ante todo, gracias por ser tan didáctico en todo. En ocasiones hay profesores que se enredan en simples cosas y mira…En tu web he aprendido lo que no he aprendido en un cuatrimestre. Recomendaré tu web en la universidad, un cordial saludo y gracias nuevamente.
Saludos, esta es la cuestión :
hacer un reproductor que permita reproducir un audio streaming (de una radio web SHOUTCAS y ICECAST (backup) que permita ver la lista de reproducción o mejor aun leer los mp3 ID3 TAGS , compatible con moviles y desktop .. hasta el momento esta colocado esta pagina de navegación rápida mientras se busca una solución mas eficiente ( hay un player HTML5 autoplay y uno FLASH que en algunos navegadores se escucha entrecortado ) la idea estaria en que el codigo pudiera auto desplegar HTML5 o FLASH segun el navegador y via css detectar si es desktop o movil
http://www.toprocknews.com/radio
cualquier idea sera bienvenida … gracias de antemano
Mi pregunta es básica, cómo puedo enlazar la ip de la radio a este reproductor, no quiero reproducir mis músicas locales, quiero que ese sea el reproductor de la radio, solo le modificaré la forma y los colores.
En el source solo pines la URL de la radio donde obtienes el streaming y listo.
Excelente de verdad gracias
Me Sirvio de Mucho ese tuto para elaborar una plataforma para moviles, por el momento solo lo implemente lo basico, con el pasar estare necesitando mas funciones…
gracias
¡Qué gusto bro! Espero que para ésta fecha todo vaya genial, saludos.
Muy práctico el tutorial, fácil para los que arrancamos de cero. Pero tengo una duda, en este caso es para reproducir canciones localmente. Yo necesito un reproductor para tener disponible en mi web que es un proyecto de emisora en línea y no voy a tener listas de reproducción sino transmisión en vivo. Los usuarios ingresan y deben encontrar el reproductor para dar play si quieren escuchar el audio en vivo y de igual manera pause, stop y contro de volumen. Es decir necesito tres botones: plause, stop y volumen y que la fuente no sea una lista predeterminada sino audio en vivo ¿me puede ayudar con este tipo de reproductor?
Quería saber si puedo poner múltimples reproductores (cada uno vinculado a otro tema musical) en un mismo html. Es posible? Como se hace? Gracias!
Claro, solo creas múltiples objetos Audio.
Hola gracias por el aporte.
Quisiera preguntar:
¿Podría funcionar también para reproducir radio online desde una ip?…
Gracias.
Me gusta el reproductor y me gustaría saber si hay alguna sección donde poder pegar todos los códigos que aparecen en los vídeos, porque hacerlo paso a paso se me hace complicado, no tengo demasiado tiempo y haciendo un copiar y pegar y luego personalizar, sería de gran ayuda!! Gracias fabuloso reproductor
Hola, gracias por el tutorial, muy bien explicado, y me ayudo con lo que necesitaba. Tengo una consulta, lo que sucede es que hice el ejemplo como lo pones en los videos, pero la barra de progreso no queda debajo del nombre, sino queda debajo del audio, y no sale. Los codigos los encontre en este enlace
https://github.com/henocdz/The-Duxer/tree/master/css
no se si podrias ayudarme con lo de la progrees bar…..
Gracias por el tutorial y por tomarte el tiempo de postearlo.
Muy bueno el aporte ; pero tengo dificultades para reproducir , alguien me podria apoyar
Muchas gracias por el aporte y por el tiempo que le dedicaste.
No obstante tengo una duda:
En el video 3 minuto 10:50 comentas que el audio no se va a escuhar a no ser que sea Explorer 9 o 10. Estoy haciendo pruebas con la versión 11 y no se escucha. Me marca el error de codec configurado en el archivo js.
No hay problemas en Chrome o Firefox.
Estoy aprendiendo programación y he ido solucionando detalles por mi mismo ya que aprendí AS2 hace tiempo y veo ciertas similitudes, pero en este caso me pierdo y no sé porqué sucede esto.
He buscado información sobre "msie" y "mp3". De hecho tengo varias pruebas hechas en otros ejercicios donde el audio se escucha sin problemas en todos los navegadores. Pero en este ejercicio en concreto Internet Explorer 11 no lo lee. ¿Podrías guiarme un poco sobre qué sucede? Gracias.