Leassons learned: el reproductor de mp3

Problema: a mis jefes les gustó un plug in de Wordpress que ya esta descontinuado: audio link player, que transforma los links a mp3 de un blog en uno de tres reproductores en flash a elegir. Si, Flash, la tecnologia que lleva varios años muerta. Traté de convencerlos, pero...

Solución

Pues bueno hay que bajar el plug de una red que lo tenga instalado, como revistacincoletras.com, y luego hacerlo funcionar en tu red.

Básicamente, lo que hace es transformar el link en esto

<object class="audio-link-player inline-player" data="http://revistahotel.com/images/player.swf" height="17" id="flash_container_audio_link_player_1" style="visibility: visible;" type="application/x-shockwave-flash" width="17"></p>
<p>
param name="wmode"&nbsp;</p>
<p>
value="transparent"&nbsp;</p>
<p>
param name="flashvars"</p>
<p>
&nbsp;value="song_url=preview_url}&amp;b_bgcolor=224757&amp;b_fgcolor=666666&amp;amp;b_colors=F9F9F7,</p>
<p>
F9F9F7,F9F9F7,000000&amp;autoplay=false"</p>
<p>
</object>

Un detalle es que prev_url es la dirección absoluta del archivo mp3 sin encodear (la dirección, no el archivo) y preview_url si esta encodeada. Básicamente, descargas el player.swf y colocas este codigo,que admite que pases como flash vars un color de fondo, un color de iconos y uno de carga (el plugin incluye tres archivos player.swf en tres distintas carpetas el de este ejemplo, es el de un solo botón de reproducción)

Claro esta, esto es flash, pero mientras todos están pasándose con urgencia a html5, mis jefes prefieren un plug in que no se ve ipads e iphones, así que vamos a darle la vuelta a eso, usando cambiando el texto que se muestra  si no hay flash por algo como esto:                            

Ahí surgio un problema ¡algunos navegadores tratan de cargar todas las canciones desde el principio!

(entre ellos chrome, que es el que uso para mi navegación personal)

se soluciona poniendo esto:

 preload="none"

y todavía se puede poner un texto que se mostrara si ninguno de los dos funciona, o un link al archivo de audio, pero puede quedar así:

<object nbsp="" p="" type="application/x-shockwave-flash"><p>
class="audio-link-player inline-player"&nbsp;</p>
<p>
data="../images//player.swf" width="17" height="17"</p>
<p>
&nbsp;id="flash_container_audio_link_player_1"&nbsp;</p>
<p>
style="visibility: visible;">param name="wmode"&nbsp;</p>
<p>
value="transparent"&gt; &lt;param name="flashvars" value="song_url={preview_url}&amp;amp;b_bgcolor=224757&amp;b_fgcolor=666666&amp;b_colors=F9F9F7,F9F9F7,F9F9F7,000000&amp;autoplay=false"&gt; &lt;audio src="{prevurl}" controls="controls" preload="none" ></p>
<p>
</object>

Si prefieren, se puede anidar el object en el audio, para que aparezca primero el el reproductor de html5 y si no esta disponible, el de flash, pero este primero no es muy estilizable todavía.

Pueden ver el resultado aquí: