1 Bit Audio Player: Reproductor MP3 mínimo

Probablemente, 1 Bit Audio Player es el reproductor de MP3s más pequeño que podamos encontrar y, una vez que lo hemos instalado, el más simple de utilizar.

Todo lo necesario para utilizarlo está en un ZIP que podemos descargar desde la página del desarrollador. Allí veremos demos, los códigos fuentes del SWF si queremos editarlo con Flash y hasta un plugin para usarlo en Wordpress. De todo eso, sólo requerimos tres cosas: la librería swfobject.js, el script 1bit.js y el reproductor 1bit.swf que debemos alojar en algún servidor.

En el caso de Blogger, se han apiadado y nos dicen que, simplemente, agreguemos lo siguiente antes de </head>:

<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/swfobject.js'></script>
<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/1bit.js'></script>
<script type='text/javascript'>
oneBit = new OneBit('http://1bit.markwheeler.net/1.4/1bit.swf');
oneBit.ready(function() {
oneBit.specify('background', '#FFFFFF');
oneBit.apply('a');
});
</script>

Si lo queremos usar de tanto en tanto podemos hacer lo mismo pero, en lugar de colocar el código de la plantilla, lo podemos colocar directamente en una entrada aunque ahi, deberemos escribir todo en una sola línea.

El unico dato que debemos configurar es el color de fondo que es blanco por defecto; simplemente, cambiamos #FFFFFF por el código de color que se nos ocurra.

Ahora viene lo interesante ya que utilizarlo es tan simple como escribir un enlace donde el contenido de href será la URL del archivo MP3 a ejecutar:

<a href="URL_archivo.mp3"> texto </a>

Como son enlaces, veremos el reproductor y el texto: al hacer click sobre ese texto, en logar de reproducirse podremos descrgar el archivo así que, si queremos, podemos ocultar esos textos, agregando la siguiente definición de estilo; ya sea entre etiquetas style o antes de </b:skin>:

Aún cuando tengamos hayamos decidido ocultar los textos, siempre los podemos hacer visibles agregando el parámetro style en la etiqueta del enlace, agregando display:inline; y cualquier otra propiedad que nos guste:

<a style="display:inline;" href="URL_archivo.mp3"> texto </a>