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)

La instalación básica es la misma que la versión anterior sólo que con diferente script. Para usar este reproductor debes pegar antes de </head> el siguiente script:

<script src='http://webplayer.yahooapis.com/player-beta.js' type='text/javascript'/>

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