6 de feb. de 2011

¿Cómo insertar un reproductor MP3 en el blog?


En algunas ocasiones, puede darse el caso de querer insertar una pista de audio o fragmento musical en el blog...pero ¿cual es el mejor reproductor mp3 y qué pasos dar...

Alsacreations
Foto Alsacreations
...Aunque probé varios reproductores mp3, el que yo te recomiendo es DewPlayer de Alsacreations (en inglés) . Es sumamente sencillo de implementar. Tienes diferentes versiones del reproductor (mini, classic, multi...), es gratuito y está desarrollado en Flash. Tienes un botón para descargar el reproductor y desde la propia página obtienes el código HTML necesario para insertar en el blog o web.

El único requisito, es que debes tener un sitio ftp (hosting) tanto para alojar el archivo del reproductor(SWF) como los mp3. En el caso de una web esto no es inconveniente, pero en el caso de un blog con blogger esto es un problema.

Usaremos un servicio de llamado DropBox que permite alojar archivos de todo tipo de manera gratuita. Es ideal para adjuntar todo tipo de archivos como PDF, Zip, Excel, etc a tu blog.

Antes de ponernos manos a la obra comentarte que también tienes un tutorial para agregar un reproductor mp3 con una lista de reproducción. es decir un reproductor y varias canciones.


Alojando el archivo flash del reproductor y los archivos MP3 en Dropbox.

DropBox es un servicio que cuenta con una versión gratuita donde tienes a tu disposición hasta 2 GBytes Gratis. No está nada mal. Esto quiere decir que cuentas con todo este espacio para almacenar archivos en internet. Lo más importante de DropBox es que puede facilitarte un LINK Directo al archivo y por lo tanto podremos indicar la url del mp3 y del reproductor.

interfaz de dropbox

Sigue estos pasos para usar Dropbox para alojar el archivo .swf y el mp3:

Paso 1. Entra en Dropbox (en inglés), create un cuenta o identificate si ya la tienes
Paso 2. Si acabas de crear una cuenta en Dropbox debes Activar la carpeta "Public"
Paso 3. Abre la carpeta "Public" (si no la tienes actívala siguiendo este enlace)
Paso 4. Presiona el botón "Upload o cargar"
Paso 5. Localiza el archivo .swf y el mp3 que vas a utilizar y súbelos
Paso 6. Copia el siguiente código por ejemplo hasta el blog de notas o hasta un Gadget del tipo HTML/Javascript del blog o bien hasta el HTML de uno de tus post:


<object data="http://dl.dropbox.com/u/22283429/dewplayer-mini.swf" height="20" id="dewplayer" name="dewplayer" type="application/x-shockwave-flash" width="160"> <param name="wmode" value="transparent" />
<param name="movie" value="http://dl.dropbox.com/u/22283429/dewplayer-mini.swf" />
<param name="flashvars" value="mp3=http://dl.dropbox.com/u/22283429/test1.mp3&amp;showtime=1" />
</object>


Paso 7. Vuelve a Dropbox, selecciona el archivo swf y haz clic en Copiar enlace público del archivo
Paso 8. Remplaza las dos primeras URL marcadas en rojo del código que pegaste en el paso 6
Paso 9. Haz lo mismo para el archivo MP3. (copia enlace publico en dropbox y reemplaza la última url)

Guarda y visualiza tu blog!

Aquí tienes mi ejemplo funcionando:




Actualizado el 9 de Agosto de 2012




Más información ¿Cómo poner el botón de...:?