audio.js: MP3s y HTML5 en todos los navegadores

Este es un reproductor de audio que utiiza JavaScript, no requiere librerías externas y nos da la posibilidad de usar la etiqueta de HTML5 <audio>, aún en los navegadores que no la soportan por lo tanto, funcionará bien en Internet Explorer, Firefox, Chorme, Safari y Opera.

Se llama audio.js y si descargamos el ZIP, veremos que en una carpeta audiojs se encuentran los tres archivos necesarios: audio.min.js, audiojs.swf y player-graphics.gif. El primero es el script en si mismo, el segundo un reproductor de Flash para aquellos navegadores que no soportan HTML5 y el tercero un sprite con las imágenes utilizadas.

A diferencia de otros reproductores que usan la etiqueta audio, este, sólo admite archivos MP3s que son los más comunes.

Para usar esto hay una condición que debe cumplirse y e es que los tres archivos deben estar alojados en algún servidor pero, dentro de la misma carpeta. No todos los servicios de alojamiento de archivos permiten eso ya que, por lo general, las carpetas son virtuales y no reales; por ejemplo: DropBox o Fileden.

Para estos demos lo he colocado directamente todo en un post pero, si es algo que se va a usar con regularidad, mejor es colocarlo en la plantilla misma así que allí, antes de </head> agregamos esto:

<script src="URL_audio.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

Y eso es todo; a partir de ese momento, ya podemos usar la etiqueta en cualquier parte y por defecto, sería algo así:

<audio src="URL_archivo.mp3" preload="auto" />

El script nos permite agregarle parámetros como autoplay para que comeince a reproducirse automáticamente o loop para que el audio se reproduzca de modo indefinidamente:

<audio src="URL_archivo.mp3" autoplay />

<audio src="URL_archivo.mp3" loop />

Para quienes les gustan las listas de reproducción, también es posible crearlas pero, para eso deberán estudiar el demo ya que no hay muchas explicaciones al respecto pese a que el script está muy bien documentado.

Es importante decir que si vamos a colocar varios reproductores, lo mejor es colocar la etiqueta dentro de un DIV o de un párrafo:

<div> <audio src="URL_un_archivo.mp3" preload="auto" /> </div>

<&div> <audio src="URL_otro_archivo.mp3" preload="auto" /> </div>

Y para quines tengan paciencia, pueden sobrescribir el CSS por defecto, agregando el estilo en la plantila, justo después del script; por ejemplo, podríamos cambiar el tamaño y el color de fondo ya que por defecto, dice esto:

<style>
  .audiojs {
    width: 460px;
    height: 36px;
    background: #404040;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  }
</style>

Por ejemplo, para centralo, simplemente he puesto:

.audiojs {margin:0 auto;}