Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Crear un Reproductor de Audio HTML5 Personalizado

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Durante este tutorial voy a presentar a usted el audio en HTML5 y a mostrarle cómo puede crear su propio reproductor. 

Si quiere tomar un atajo, eche un vistazo al Reproductor de Audio HTML5 ya hecho y disponible en el mercado de Envato. Este le permite crear listas de reproducción de una variedad de fuentes y viene con un gran rango de opciones de personalización. 

HTML5 Audio Player with Playlist
Reproductor de Audio HTML5 con Lista de Reproducción

Usted también puede encontrar gran cantidad de expertos HTML5 en Envato Studio que le pueden ayudar.


Introducción

Hasta ahora la implementación de audio en un proyecto web ha sido un proceso tedioso, confiando fuertemente en plugins (conectores) de terceros como Flash. Desde que el iPhone de una manera notoria no acepta este plugin y dadas las noticias de que Adobe no respaldará más Flash para móviles, muchos desarrolladores  están buscando otras formas de incorporar audio dentro de sus proyectos. Aquí es donde entra el audio HTML5 para resolver el problema.

A pesar de que HTML5 proporciona un estándar para reproducir archivos de audio en la red, aún está en su infancia y todavía tiene un largo camino por recorrer antes de que pueda proporcionar todo aquello que otros plugins tales como Flash audio proporcionan. Sin embargo, en la mayoría de los casos, es más que adecuado.


Audio HTML5 simple

La manera más sencilla de implementar audio dentro de una página web utilizando HTML5 es empleando la nueva etiqueta audio. Adicione esto a su documento HTML5 con el siguiente código:

Si usted echa un vistazo al código arriba, usted podrá ver que he declarado la etiqueta <audio> y definido el atributo controls, de tal manera que podremos ver los controles por defecto del reproductor.

Anidadas en la etiqueta <audio> tenemos dos etiquetas 'src'. Una define la pista MP3 y la otra define el formato OGG. El formato OGG es utilizado especialmente para permitir que la música sea reproducida en Firefox, ya que debido a cuestiones de licencia Firefox no respalda MP3 sin la utilización de un plugin. Una cadena de texto Su navegador no respalda el elemento audio les permite conocer a los usuarios con navegadores no aptos qué es lo que está sucediendo. 


El reproductor de audio HTML5 por defecto

Atributos de Etiquetas de Audio HTML5

Así como respalda atributos globales HTML5, la etiqueta respalda además un conjunto de atributos propios.

  • autoplay - Este atributo puede establecerse como "true" o dejarse en blanco "" para definir si bien la pista se debe reproducir automáticamente tan pronto como se cargue la página.
  • controls - Como se observó en el ejemplo arriba, esto define si los controles nativos tales como 'reproducir, pausa', etc se deben mostrar o no.
  • loop - Este se puede establecer como "loop" y define si la pista debe reproducirse nuevamente una vez haya finalizado.
  • preload - Este se puede establecer como "auto" (lo que describe si el archivo debería cargarse tan pronto se cargue la página), "metadata" (el cual describe si únicamente los metadatos, pista, título. etc se deberían cargar), "none" (que establece que el navegador no debería cargar el archivo cuando la página se cargue). 
  • src - Este se puede también observar en el ejemplo arriba y define la url de la música que se deberá reproducir por la etiqueta audio.

Llevándolo hasta el tope

En los últimos pasos, hemos visto la forma más simple de audio HTML5. Cuando empezamos a utilizar la etiqueta audio con javascript, podemos crear algunos reproductores de audio realmente interesantes y prácticos. Veamos lo que puede hacer jQuery por nosotros. Después de definir document ready en jQuery, podemos crear una nueva variable de audio para contener nuestro archivo de audio de una manera tan sencilla como esta:

¡Es realmente así de simple! Luego en cualquier momento en que queramos realizar una acción con el audio podemos dispararla utilizando la variable 'myaudio'. Aquí hay una lista de acciones que podemos tomar con la variable.  Tome nota de estas, ya que estaremos usando algunas más tarde en el tutorial cuando creemos nuestro reproductor de audio.

Si usted quiere llamar una función una vez que el audio haya finalizado su reproducción, puede utilizar 'myaudio.addEventListener('ended',myfunc)' - Esto hará un llamado a 'myfunc()' una vez que el audio haya finalizado.


Creando el Reproductor de Audio HTML5: Marcado 

Ahora que tenemos un poco de fundamentos en audio HTML5 y entendemos los principios básicos, es tiempo de poner todo esto en práctica y crear un reproductor HTML5 personalizado. Omitiré la fase de diseño ya que está fuera del ámbito de este tutorial, pero usted puede descargar el código fuente  de acompañamiento y navegar a través del archivo PSD para obtener alguna idea acerca de cómo está unido todo.

La parte superior del documento está compuesta por el doctype HTML5. El Reset CSS de Yahoo, la fuente web de Google 'Lobster' para el título. Luego tenemos la última versión de jQuery y el archivo JavaScript personalizado js.js. Por último tenemos html5slider.js, el cual le permite a Firefox desplegar el tipo de rango de entrada HTML5, el cual utilizaremos para la barra de desplazamiento de audio.

Luego del título h1, he creado un div con las clases "container" y "gradient". He creado una clase separada de gradiente que será reutilizado sobre otros elementos más. Dentro de ".container" He adicionado una imagen (la cual será la cubierta del álbum), luego las tres etiquetas ancla actuarán como los controles del reproductor. Entre ellas usted podrá encontrar la barra de desplazamiento/campo de entrada de rangos HTML5.


Creando el Reproductor de Audio HTML5: Estilos

En vez de repasar cada uno de los aspectos del CSS, voy a darle una vista global y anotar algunas partes en particular que merecen una atención especial de su parte. 

En el código abajo he creado la gradiente para el reproductor el cual ha sido generado utilizando el editor de gradientes CSS. Luego he creado el reproductor ".container" con algunas transiciones CSS3.

Usted notará además que he utilizado el atributo CSS3 box-sizing y lo he establecido como 'border-box'. Esto le permite al padding de 10 px alrededor del contenedor estar incluido dentro de la anchura que he declarado, en este caso 427px. Si no hubiera hecho esto,el padding se hubiera adicionado a los 427 px haciendo el contenedor más grande de lo que realmente quiero. Se está convirtiendo en una práctica común estos días aplicar * {box-sizing: border-box;} lo que de hecho permite aplicar estilos de una manera más intuitiva.

He adicionado además algunas transiciones CSS3 a ".coverlarge" para permitir algunas transiciones agradables cuando se inicia el reproductor. El CSS puede parecer un poco abrumador al principio, pero mucho de ellos son prefijos específicos para cada navegador  para asegurar que el reproductor audio se vea y trabaje igual en diferentes navegadores. 


Cómo debería verse el reproductor de audio en esta fase

Una vez que el contenedor para el reproductor está completado, es tiempo de crear los controles del mismo.  La mayoría de los botones se han creado utilizando sprites CSS

Por desgracia IE no respalda aún la entrada de rango HTML5 así que he decidido no mostrar el control de desplazamiento a los usuarios de IE. Si usted se encuentra en la posición de que esto no es aceptable, puede utilizar el jQuery UI slider de una manera similar al método que he empleado.  Aún así, he optado por ocultar simplemente el control de desplazamiento, por lo tanto input{display:none\9!important;} Esto básicamente oculta el input a los usuarios de ie (mire este hilo en Stack Overflow para más información acerca del \9).

El problema con el slider de rango HTML5 es que únicamente unos pocos navegadores permiten aplicarle un estilo personalizado, principalmente navegadores webkit (Chrome y Safari). Opera y Firefox mosytrarán solo un desplazador (slider) de rango, por desgracia. Si usted necesita estilos personalizados a lo largo de todos los navegadores, entonces usted puede utilizar el jQuery UI slider como se menciono antes. Puede ver los esrilos personalizados para navegadores webkit en el atributo input::-webkit-slider-thumb.


Crear el Reproductor de Audio HTML5: jQuery

Una vez que se han hecho los estilos y el marcado, es timpo de traer el reproductor a la vida. Podemos hacer eso utilizando el framework de javascript jQuery. Una vez que el document ready en jQuery ha sido declarado, necesitamos crear algunas variables dentro de las cuales podemos almacenar nuestros objetos jQuery.

En la variable "song" (canción) arriba se puede ver que hemos declaradodos pistas.  El formato OGG para Firefox y MP3 para otros navegadores. Luego he creado una declaración condicional IF de tal manera que podamos comprobar si el navegador puede reproducir MP3s o no. Si puede, entonces podemos hacer que la variable "song" obtenga la pista MP3 - si no, entonces reproducirá el formato 'OGG'.

Los próximos elementos que crearemos son funciones de clic, las cuales nos permitirán reproducir y pausar la música.  Yo utilizo la acción de audio play() para iniciar el audio, luego utilizo el método jQuery replaceWith, el cual básicamente reemplaza el botón de reproducción por el botón de pausa.

También he utilizado las clases "coverLarge" y "containerLarge" para el "contenedor" y la "portada". Ya que he añadido transiciones CSS3 a estos anteriormente en el CSS, esto añadirá una agradable transición una vez que el audio empiece a reproducirse. La función de "pause" trabaja de una manera similar pero sin las transiciones. Cuando se hace clic, reemplaza el botón de pausa por el botón de "reproducir".

Los botones de silenciar y silenciado funcionan de manera similar a los botones de reproducir y pausar, pero llaman a las acciones relacionadas y reemplazan los botones con las alternativas apropiadas. 

Cuando el usuario hace clic sobre el botón "cerrar" hacemos un llamado a jQuery a remover las clases "containerLarge" y "coverLarge". Esto ocultará la portada y cerrará el reproductor de vuelta. Luego podemos pausar el reproductor haciendo un llamado a la acción pause() y reiniciar el currentTime del audio a 0. Esto establece la pista de vuelta al principio.

Ahora es tiempo de ir hacia el tirador de audio (control de desplazamiento) al cual se le ha dado un id de "seek". La primera función es permitirnos mover el tirador a cualquier parte de la pista de audio. Esto se hace al detectar un cambio cuando alguien mueve el tirador.  Luego establecemos el tiempo song.currentTime para que coincida la parte de la canción a la que hemos desplazado el tirador. Además establecemos el atributo max para reflejar la duración de la canción.

La parte final del código jQuery es hacer que el tirador "#seek" se desplace a lo largo con la duración del audio. Hacemos esto al añadir un Event Listener al mismo y haciendo un llamado a la función cada vez que se actualiza el tiempo del audio.  Establecí una variable "curtime" para obtener el tiempo actual de reproducción de la pista. Luego actualizo el valor del tirador para reflejar posición en el tiempo del audio.

¡Y ahí lo tiene! Un reproductor de audio HTML5 que puede implementar en su sitio o aplicación.


Conclusión

Como se menciono antes, el audio HTML5 todavía está en su infancia y todavía tiene campo para mejoras.  En el momento el audio está diseñado para tocar música y por consiguiente buscará flujo de audio desde el servidor, lo que puede dar resultado a algunos navegadores teniendo complicaciones con la reproducción. No siempre es un problema, simplemente quiere decir que algunas veces empezará a reproducir antes de que el audio se haya descargado por completo.

Esto puede ser potencialmente un inconveniente si usted quiere utilizar audio HTML5 para asuntos tales como efectos de sonido en juegos o aplicaciones con intensidad de audio. Por esta razón nuestros amigos de Google han llegado con un método para mejorar las debilidades de la etiqueta audio.  Google ha construido y presentado una propuesta al W3C para la "Web Audio API".  Esto prueba ser mucho más poderoso que audio HTML5 nativo, sin embargo el problema es que en esta etapa (¿Puede adivinarlo?) solo funciona en Chrome.

Usted puede leer más acerca de la Web Audio API de Google y ver algunos ejemplos en Google code o revisar la especificación para audio web.

Espero que haya disfrutado aprender acerca de audio HTML5 y de cómo crear sus propios reproductores. Mi reproductor incluye controles básicos, pero nada le detiene de añadir más características como control de volumen e incluso añadir sus animaciones personalizadas propias. Con un poco de reflexión y experimentación usted puede realmente crear algunos reproductores de audio grandiosos. ¡Descargue el código fuente y espero ver pronto sus logros! 

Y si quiere ver más opciones para trabajar con reproductores de audio y otro tipo de media en HTML5, revise los items de Media HTML5 en el Mercado de Envato. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.