Yahoo! Web Player: Reproductor de MP3 y videos

Hace poco m?s de un a?o hab?amos visto el Yahoo! Media Player, un reproductor de mp3 bastante original que tiene como caracter?stica detectar cualquier enlace de mp3 y reproducirlo en su peculiar reproductor que se pliega y despliega abajo de la p?gina.

Desde el pasado 4 de agosto se actualiz? el reproductor, que por cierto ahora se llama Yahoo! webplayer, y el cual ahora tiene un aspecto m?s elegante, incorpora una barra de reproducci?n para situarnos en un punto espec?fico de la canci?n, muestra en un icono rojo el n?mero de canciones que hay en la lista de reproducci?n, y adem?s ahora puede reproducir videos incluyendo videos de YouTube, formatos MP4, WMV, etc.

Puedes ver el ejemplo de este reproductor de MP3 y videos haciendo click en alguno de estos links.

Canci?n (This is not a love song)
Video de YouTube (This boots are made for walking)

Para usar este reproductor descarga y descomprime este archivo. S?belo a un hosting y estando en la Edici?n HTML de tu plantilla pega antes de </head> lo siguiente

<script src='URL de tu archivo' type='text/javascript'/>

Ah? agrega la URL del archivo YahooPlayer.js que previamente subiste. Ahora, en tus entradas, o un elemento HTML/Javascript pega las URLs de las canciones o los videos de esta forma:

<a href="URL del archivo MP3 o Video">Nombre de la canci?n</a>

Y listo, de inmediato aparecer? el ?cono de play junto al enlace, indicador de que se puede reproducir en el reproductor.

Por defecto el reproductor a?ade una car?tula gris a todas las canciones, pero si quieres que tu canci?n tenga una car?tula espec?fica entonces el c?digo a utilizar ser?a este:

<a href="URL del archivo MP3 o Video"><img src="URL de la imagen" style="display:none" />Nombre de la canci?n</a>

Yahoo nos ofrece unas cuantas opciones de par?metros para personalizarlo, aunque no todos pueden ser muy ?tiles, quiz? lo m?s rescatables de ellos sean s?lo tres: el autoplay, el auto-avanzar, y la car?tula definida. Cualquier de ellos podemos usarlos agregando justo debajo del script que a?adimos antes de </head>, lo siguiente:

<script type='text/javascript'>
var YWPParams =
{
autoplay:false,
autoadvance:false,
defaultalbumart:&#39;URL de la imagen de la car?tula&#39;
};
</script>

autoplay, es el par?metro que ordena si se reproduce autom?ticamente o no, por defecto est? en false, para activarlo lo cambiamos por true
autoadvance, indica si una canci?n continua al terminar la anterior o no, true har? que continue y false lo contrario.
defaultalbumart, es la car?tula para todas las canciones, s?lo hay que agregar la URL de la imagen donde se indica.

Adem?s de esos par?metros podemos agregar un poco de CSS para modificar algunos aspectos del reproductor. S?lo hay que a?adir antes de ]]></b:skin> algunos de los estilos que quieras utilizar.

Eliminar el logotipo de Yahoo webplayer

El reproductor incluye un logotipo en la parte superior izquierda, para eliminarlo hay que agregar estos estilos:

.ywp-container .ywp-hdr .ywp-hdr-logo {display:none !important;}

No mostrar ninguna car?tula

Distinto al par?metro del reproductor, o a la imagen que agregamos directamente en el enlace, si quieres no mostrar ninguna car?tula entonces a?ade estos estilos:

.ywp-info .ywp-thumbnail-default-img, .ywp-info .ywp-thumbnail-img {display:none !important;}

Cambiar el color del reproductor

Aunque el color que trae por defecto es muy elegante, tambi�n puede cambiarse por otro color a?adiendo lo siguiente:

.ywp-player {background-image:none !important; background-color:#8A0886 !important;}

Cambiar el color de la lista de reproducci?n

Si has cambiado el color del reproductor seguro querr?s cambiar el color de fondo del ?rea de la lista de reproducci?n, este se cambia con estos estilos:

.ywp-media-content-audio .ywp-audio-pane, .ywp-tray ol.ywp-playlist {background-color:#F5A9F2 !important;}

Y para finalizar, tambi�n podemos hacer uso de las listas de reproducci?n, �stas podr?n reproducirse sin problema en este reproductor.

En los par?metros que nos ofrece Yahoo hay uno que es para controlar el volumen, pero lo he probado en varias ocasiones y no ha funcionado, de cualquier manera, si alguien quiere probarlo o ver la lista completa de los par?metros de reproductor pueden verlos en el sitio del reproductor.

Sitio | Yahoo! webplayer
Par?metros | How to set up