5 ene 2014

Agregar un reproductor mp3 al blog

|

Agregar un reproductor de música puede crear un clima importante en el blog, más aún cuando se trata de un blog en el que el tema general es de determinado artista o banda. También puede ser que el lector se relaje y disfrute todavía más el contenido del sitio.

Hay que ser razonable también, y a las personas le gustan distintos tipos de género musical y puede ser que se enfurezcan al encontrar en tu blog canciones que no les agradan.

El reproductor que tengo para compartirles reproduce mp3 y está hecho con flash. Hay 4 diferentes, desde al más simple, que solo tiene la opción de pausar, hasta el más completo, con el que podremos reproducir varios temas, bajar el volumen y poner stop. Además son personalizables, con distintos colores y tamaños.

Reproductor mini


Este es el más sencillo, cuenta únicamente con botón de pausa y reproduce una sola canción. Para insertarlo en el blog hay que hacer uso de este código:

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=http%3A//canción1.mp3&amp;autoplay=1" />
</object>
Reproductor normal


Igual al anterior, lo único que cambia es el diseño, que es un poco mejor, con sombras y bordes redondeados.
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3.swf" />
    <param name="bgcolor" value="#ffffff" />
   <param name="FlashVars" value="mp3=http%3A//canción.mp3&amp;autoplay=1&amp;bgcolor1=757575" />
</object>
Reproductor maxi


El diseño del anterior pero mucho más completo, se puede subir y bajar el volumen, se puede poner stop e incluso hay un botón para más información.

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//canción.mp3&ampautoplay=1&ampshowstop=1&amp;showinfo=1&amp;showvolume=1&amp;bgcolor1=757575" />
</object>
Reproductor multi


El más completo de todos, con un diseño muy atractivo. Se puede poner stop, adelantar y retroceder y podemos escuchar varios temas.
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//canción1.mp3|http%3A//
canción2.mp3http%3A//canción3.mp3&amp;autoplay=1&amp;showvolume=1&amp;showinfo=1&amp;bgcolor1=757575&amp;title=Título canción1|Título canción 2|Título canción 3" />
Voy a explicar a continuación el significado de cada color en los códigos:
  • Rojo: ancho del reproductor en píxeles
  • Azul: altura del reproductor en píxeles
  • Verde: enlace de la canción sin usar http://
  • Rosa: cuántas veces se repite el tema/los temas.
  • Naranja: color del fondo
  • Violeta: el título de cada canción
En el último reproductor se complica un poco, ya que para agregar más canciones, tal como lo vemos en el código, habrá que agregar después del enlace, esta parte:

|http%3A//

Y una vez realizado esto, la dirección de la nueva canción y así sucesivamente.

Con lo que respecta a las URLs de los temas, siempre tienen que terminar en .mp3. Si no conoces algún servidor que aloje las canciones de esta manera, presta atención a esta parte de la explicación (obviamente si sabes como hacerlo salteate esta explicación). Podemos hacerlo mediante esta página. Allí deberemos clickear en donde dice 'Browse' para cargar la canción. Una vez hecho este paso, damos click en 'Start Upload':


Ahora hay que esperar a que termine de subirse y luego nos aparecerá un enlace abajo, lo tendremos que copiar:



Espero que se haya entendido, sinceramente es un poco difícil de explicar el uso de los códigos. Invito a visitar la página de los reproductores, haciendo click aquí. Su código es abierto, es decir que lo puede editar cualquiera y además se podrá personalizarlo más.