10 recursos para implementar Audio de HTML5 hoy mismo

Confieso que nunca fui fanático de utilizar audio en un sitio web, sin embargo y en determinadas ocasiones puede ser necesario implementar un reproductor de audio. Para lograrlo existen distintas alternativas, unas mejores que otras, en lo personal creo que la etiqueta audio, provista por HTML5 es la opción candidata.

¿El problema? la compatibilidad con navegadores más antiguos. Gracias al sitio Can I Use podemos saber con total precisión que browsers son los que aceptan a esta fantástica etiqueta: Internet Explorer 9+, Firefox 26+, Chrome 31+, Safari 5.1+, Opera 19+, iOS Safari 4.0+, OperaMini en ninguna versión, Android 2.3+, Blackberry 7+, e IE para móviles 10+.

compatibilidad html5 etiqueta audio

Como pueden ver la compatibilidad con la etiqueta Audio se encuentra en una etapa bastante buena, el soporte en cuanto a los navegadores más utilizados se aproxima al 82%, un porcentaje bastante aceptable.

Sin embargo podemos mejorar este 82% utilizando algunos recursos que mediante ciertos mecanismos logran una compatibilidad prácticamente total, principalmente la tecnica consiste en comprobar si el navegador acepta esta etiqueta y en caso contrario emplean otra tecnología para reemplazarla.

La etiqueta Audio de HTML5 en funcionamiento:

Si decidimos dar soporte solo a los navegadores compatibles emplear la etiqueta AUDIO es fácil, tan solo nos limitamos a escribir:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
El navegador no soporta la etiqueta AUDIO.
</audio>

Como pueden ver podemos emplear varios formatos de archivo y el navegador mostrará un bonito reproductor, que va a cambiar en función al navegador utilizado.En caso de no soportar AUDIO el navegador va a mostrar el texto.

Esta forma de implementar audio tiene dos problemas.

El primer problema es que el reproductor va a cambiar según el navegador utilizado y si bien se puede homogeneizar su aspecto es muy difícil que el resultado sea idéntico en todos los navegadores.

Por ejemplo Chrome y Firefox tienen un reproductor completamente diferente:

diferentes reproductores con audio html5

El segundo problema, que es más fácil de solucionar, esta relacionado a los formatos de archivo aceptado.

  • Internet Explorer. Acepta: MP3 / No Acepta: WAV, OGG
  • Chrome. Acepta: MP3, WAV y OGG.
  • Firefox. Acepta: WAV y OGG / Acepta Parcialmente: MP3
  • Safari. Acepta: MP3, WAV / No Acepta: OGG
  • Opera. Acepta: WAV y OGG / No Acepta: MP3.

La etiqueta AUDIO acepta la utilización de múltiples formatos, pero desde el punta de vista de la implementación no siempre es fácil brindar tres alternativas de un mismo archivo. Imaginen un sitio estilo galería de sonidos, deberían multiplicar su capacidad de almacenamiento según los formatos.

Como pueden ver la etiqueta AUDIO de HTML5 es una solución limpia, pero presenta algunas desventajas que complican su implementación.

Para solucionar estos inconvenientes les presento algunas alternativas que deberán evaluar según sus necesidades.

10 recursos para implementar AUDIO HTML5

jPlayer: Reproductor Audio y Video.

jplayer

jPlayer es una de las mejores alternativas para implementar la etiqueta AUDIO de HTML5 sin perder la compatibilidad con los navegadores más antiguos.

Esta etiqueta requiere del framework jQuery, aunque tambien funciona con Zepto en su versión 1.0 o superior. Acepta una muy buena variedad de formatos y ejecuta un reproductor Flash en caso de que el navegador no soporte la etiqueta HTML5.

Los formatos aceptados en HTML5 son: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* y en su versión Flash:mp3, m4a (AAC), m4v (H.264), rtmp, flv.

Audio.js: Reproductor de audio MP3

audio para todos los navegadores

Esta alternativa solo reproduce sonidos, además solo funciona con el formato MP3, y como dice el autor de este proyecto, prácticamente nadie exporta sus archivos de sonido en formato OGG.

Al igual que la alternativa anterior, utiliza un reproductor flash para los navegadores que no soportan AUDIO de HTML5.

Plucked: Un editor de audio

editar audio con html5

Plucked no es un reproductor, es un editor de audio HTML5, la idea detras de este proyecto es la de dar un total control sobre los archivos de sonido, algo que no se puede hacer desde el reproductor nativo de cada navegador.

Con este editor se puede cortar, pegar, exportar y hasta agregar efectos a nuestros archivos de audio.

La gran contra de este proyecto es su compatibilidad con los navegadores más antiguos, el recurso se limita a funcionar en navegadores que acepten la etiqueta.

Es una muy buena alternativa para aquellos que buscan realizar una aplicación de edición de sonidos sencilla.

MediaElement: Un reproductor de lo más completo.

tabla de compatibilidad audio

Funciona tanto para audio como video, además de brindar una alternativa Flash para los navegadores antiguos también emplea una solución basada en SilverLight.

Tiene como dependencia a jQuery.

Como punto positivo, este proyecto respeta la estructura HTML5 básica de estas estructuras, en base a evaluar la compatibilidad con el navegador utilizado modifica dinámicamente dicha estructura para lograr una compatibilidad extendida.

Este proyecto se actualiza constantemente utilizando el feedback provisto por los desarrolladores que lo utilizan en todo el mundo.

Audio5js: Compatibilidad sin dependencias

audio5js

Audio5js es una solución que no requiere dependencias de ningún tipo, solo necesita que el navegador utilizado tenga habilitado JavaScript, eso es todo.

Este proyecto tiene compatibilidad con la mayoría de los formatos de audio, al menos los mas populares.

Es una solución liviana, al no necesita dependencias su peso es ínfimo a comparación a otras alternativas. Además utiliza la etiqueta HTML5 Audio para funcionar sin la necesidad de modificarla.

Como punto no tan positivo podemos decir que este proyecto no cuenta con una UI, esto significa que queda a nuestro cargo el diseño del reproductor. No obstante en el sitio del proyecto hay bastante documentación para realizar este trabajo.

Un detalle importante. Audio5js nos brinda un total control sobre la forma de reproducir los archivos de audio, podemos controlar desde el código aspectos como las pausas, el volumen, o bien la forma de cargar los archivos.

html5media: Audio HTML5 compatible sin configurar nada

musica y html5

html5media es una propuesta interesante por su sencilla implementación, este proyecto se instala mediante la inclusión del archivo script a nuestro sitio, eso es todo, no hay que hacer nada más.

Lo bueno de este proyecto es que respeta la estructura HTML5 estándar de un audio o video, html5media se encarga de hacerlo compatible con navegadores más antiguos.

SoundManager2: Audio compatible casi sin Flash

sound manager

SoundManager2 es otra alternativa interesante que brinda compatibilidad con todos los navegadores sin “casi” recurrir a Flash.

Tiene soporte completo para los formatos MP3 y MP4. Y funciona perfectamente en dispositivos móviles. Este proyecto cuenta con Flash, sin embargo lo emplea en muy pocos escenarios, especialmente cuando cualquier otra alternativa no funciona, utilizando Flash como ultimo recurso.

La API cuenta con opciones básicas de control: stop, play, pausa, mute, control de volumen, etc.

A diferencia de otras alternativas esta herramienta es utilizada por grandes proyectos de internet, en el sitio oficial del proyecto pueden ver una lista de referencias, esto garantiza en gran medida un correcto funcionamiento.

SoundJS: API para reproducir audio

listas y galerias de mp3

SoundJS es en esencia un API para reproducir archivos de audio en cualquier navegador, independientemente de su nivel de compatibilidad con HTML5.

Como desventaja no emplea la estructura HTML5 básica, sin embargo como alternativa es interesante ya que permite gestionar y manipular los archivos directamente desde JavaScript. Algo que en determinados momentos puede ser una ventaja, obviamente depende solamente de nuestras necesidades.

html5Preloader: Gestionar la carga de sonidos

precargar archivos de audio

html5Preloader no es un reproductor de audio en si mismo, es más bien una solución para la gestión y administración de carga de archivos, con esta herramienta podemos decidir la forma en que se precargan los archivos.

Si bien no es un reproductor de audio, cuenta con uno para reproducir sonidos, pero repito, esta alternativa es interesante desde el punto de vista de la manipulación de los archivos. Es una solución liviana, flexible y fácil de utilizar.

Este proyecto se pensó para ser utilizado en el desarrollo de videojuegos.

Are We Playing Yet?: Benchmark y tests

benchmark audio html5

Este ultimo recurso sirve para analizar la forma en que se reproducen los archivos de sonido en nuestro sitio. La herramienta permite escribir pruebas y correrlas, algo muy útil para prevenir posibles errores y fallas del sistema. En especial cuando los usuarios simultáneos comienzan a aumentar.

Incluso, y quizás es la mejor opción de este proyecto, se puede saber como funcionan nuestros archivos y reproductores en los distintos navegadores, no solo de escritorio sino también en sus versiones móviles.

Categorizado en: