Yahoo! Media Player: Reproductor de MP3

AVISO
Este reproductor ya no funciona, pero hay una versión más actualizada y funcionando de este reproductor que además de reproducir música MP3 también permite reproducir videos de YouTube.

Hay muchos reproductores en flash para MP3 pero pocos suelen ser tan llamativos y originales como el reproductor de MP3 de Yahoo! Media Player.

Es un reproductor el cual permanece "escondido" y al hacer click sobre el enlace de una canción aparece en la parte de abajo con los controles del reproductor.

Pueden ver un ejemplo haciendo click en cualquier a de estas canciones:

Cambia la URL de tu archivo MP3 donde se indica al igual que el nombre de la canción. ¡Y listo! Automáticamente aparecerá junto al nombre de la canción un ícono de Play que indicará que es una canción.

Si deseas que tus canciones también muestren la caratula del álbum entonces el código que deberás usar será este:

<a href="URL_de_la_cancion.mp3"><img src="URL de la imagen" style="display:none" />Nombre de la canción</a>

La imagen deberá ser cuadrada y no rectangular.

Eliminar logotipo de Yahoo! y leyenda learn more about this player
Por defecto el reproductor tiene el logotipo de Yahoo! y una leyenda con un enlace que dice: learn more about this player

Para eliminarlo entra en Diseño > Edición de HTML y antes de ]]></b:skin> lo siguiente:

#ymp-yahoo-logo, #ymp-relevance {visibility: hidden;}
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base { width:560px !important; }

Cambiar el color del reproductor


El color original del reproductor es gris pero también puedes cambiarlo por el color que quieras, sólo agrega antes de ]]></b:skin> lo siguiente:

#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
background-color:#2F437C !important;}

Cambia donde se indica el código del color que más te guste.

Cambiar el color de las letras del reproductor

#ymp-player .ymp-color-text-main {
color:#000000 !important;}

Igualmente puedes elegir el color que prefieras.

Cambiar el color de la lista de reproducción
Igual que en el anterior quizá necesites cambiar el color de la lista de reproducción, para ello pega antes de ]]></b:skin> lo siguiente:

#ymp-tray .ymp-tray-track {
color:#FFCE0C !important; /* Color para los títulos */
}
#ymp-tray .ymp-tray-track:hover {
color:#FFFFFF !important; /* Color del título al pasar el cursor */
background-color:transparent !important;
}
#ymp-tray .ymp-tray-track.playing,
#ymp-tray .ymp-tray-track.playing:hover {
color:#FFFFFF !important; /* Color del título de la canción en reproducción */
background-color:#777777 !important;
}

Actualización: 19/02/2010
Eliminar la información sobre el hosting donde están alojados los archivos

#ymp-meta-album-title{display:none!important;}

Eliminar enlace de Yahoo! Search que aparece sobre el título de la canción

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Justo debajo de él pegamos lo siguiente:

<script type="text/javascript">
//<![CDATA[
// Disable Yahoo! search links
var apiReadyHandler = function (){
/* Once API ready handler is invoked, YAHOO.MediaPlayer class can be accessed safely */
/* For example: Add other event listeners **/
YAHOO.MediaPlayer.onMediaUpdate.subscribe(DisableTitleSearch);
YAHOO.MediaPlayer.onTrackStart.subscribe(DisableTitleSearch);
};

var DisableTitleSearch = function() {
var track_title = document.getElementById('ymp-meta-track-title');
var artist_title = document.getElementById('ymp-meta-artist-title');
if(track_title && artist_title){
track_title.href = artist_title.href = 'javascript:void(0)';
track_title.onclick = artist_title.onclick = function(){ return false; };
}
};

YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
//]]>
</script>

Eliminar la caratula del álbum
Para que la caratula del álbum no se vea pega antes de ]]></b:skin> lo siguiente:

#ymp-meta-image { display:none !important; }
#ymp-body #ymp-meta-top,
#ymp-body #ymp-meta-bottom {
left:8px !important;
width:330px !important;
}

Cambiar la caratula del álbum por default
Cuando no ponemos una caratula a una canción aparecerá una imagen de una bocina. Podemos cambiar esta imagen de la bocina por cualquier otra, sólo pega debajo de la línea del script, es decir, debajo de esta línea:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Lo siguiente:

<script type="text/javascript">
var YMPParams =
{
defaultalbumart:'URL de la imagen'
}
</script>

Ahí agrega la URL de la imagen de la caratula donde se indica.




Enlace | Yahoo! Media Player