Reproductor de Audio Personalizado con HTML5, Javascript y un poco de CSS3

En este ejercicio veremos cómo podemos interactuar, manejar y personalizar un reproductor de música utilizando la etiqueta de audio de html5, vamos a jugar un poco con el diseño de manera que el resultado sea el que nosotros queramos y no el que el navegador nos coloque. Vamos a utilizar un poco de javascript para emplear unas funciones y css3 para dar una mejor visualización. Sin más, Manos a la obra.

Esto es lo que vamos a lograr:


Para este ejercicio debes de saber lo básico de esta etiqueta audio de html5, (que formato de audio soporta cada navegador, hasta que versiones soporta cada navegador y algo del manejo de los controles de esta etiqueta) si no te remito a este tutorial http://www.tutosytips.com/dia-11-hablemos-de-la-etiqueta-audio-en-html5/ donde se trata de explicar este tema un poco.
Ok, empecemos.

EL HTML

Dentro del id=”contenedor” vamos a colocar el reproductor. Primero agregamos la etiqueta audio con un id, lo hacemos sin agregar controles ya que estos los hacemos manualmente, Luego agregamos el archivo de música con sus diferentes formatos para una reproducción perfecta en los diferentes navegadores. Luego abrimos otro div con clase audiocontrols donde manejaremos los controles del reproductor, cada botón con su clase independiente para referirnos a el más adelante y poder personalizarlo, luego otra clase donde manejaremos el volumen del sonido, igual con clases independientes. Y cerramos todo.

En el mismo documento insertaremos el Script que nos hará todo el trabajo, lo hacemos después de cerrar el div anterior

Si no tienes mucho conocimiento y familiaridad con estos Scripts quizás pierdas un poco el rumbo del ejercicio, pero básicamente lo que hacemos es primeramente llamar las librerias de Jquery y UI, luego tenemos un script mas personalizado para dar interactividad a los botones de controles del reproductor, los obtenemos a cada uno mediante su clase y le damos funcionalidad mediante el click del usuario, e igualmente las funciones para controlar el volumen del reproductor, utilizamos Jquery UI para hacer este trabajo facilmente y ahorrarnos mucho.

EL CSS

Y por ultimo tenemos el css, aquí especificamos tanto posiciones de cada elemento aspecto visual del reproductor, el contenedor cuenta con un borde y con un degradado que si bien el código es un poco largo lo podemos obtener fácilmente Gracias a una buena herramienta que nos hace el trabajo en la siguiente dirección http://www.colorzilla.com/gradient-editor/ que tambien nos especifica el codigo para cada uno de los navegadores por medio de los diferentes prefijos de cada navegador, luego a los iconos en general le damos altura y ancho etc. Luego nos referimos a ellos individualmente por medio de su clase para mostrar su respectiva imagen, esta imagen es una sola, es la técnica de css sprite, la ubicamos por medio de su posición por medio de la propiedad background-position, y de igual manera en su estado hover, luego ajustamos los controles y el slider del volumen en su respectiva posición y el control que nos indica el estado del volumen.

Espero que este ejercicio te sirva, no sé si la explicación haya sido clara para que hagáis las modificaciones pertinentes pero lo importante es que sigamos adelante en este maravilloso mundo del diseño web.

Nos vemos en otro tutosytips!!

———-

———-

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. martin dice:

    podrias porfavor resubir el archivo del ejercicio?al descargarlo winrar me tirar error en el archivo, te felicito por esta pagina es excelente!

  2. Sebastian dice:

    Gracias por el aporte mr. Johan. Ahora me interesa ver como hacer la barra del tiempo. Voy a probar de hacer yo mismo.

  3. Pakkal dice:

    Excelente aporte, andaba buscando algo asi¡¡¡