AVISO Aunque este reproductor funciona sin problemas, hay una
versión más actualizada de este reproductor que 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:
Peroxide swing
Fever
That's how it goes
Instalarlo en tu blog es una de las grandes ventajas ya que es de lo más sencillo en cuanto a reproductores de música.
Sólo tienes que entrar en
Diseño > Edición de HTML y antes de
</head> pegar lo siguiente:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Ahora en una entrada o en un elemento
HTML/Javascript pega esta línea por cada canción que quieras agregar al reproductor:
<a href="URL_de_la_cancion.mp3">Nombre de la canción</a>
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.
NOTA: El reproductor no funciona si las canciones se alojan en Google Sites, pero puedes alojarlas en otro hosting como
Dropbox o cualquier otro (Gracias a
José GDF por esta aclaración)
Personalzación
Caratula del álbumSi 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
Las letras del reproductor son un gris oscuro, pero si cambias el color del reproductor seguro podrás tener problemas para leer las letras, así que también puedes cambiarlo, sólo pega antes de ]]></b:skin> lo siguiente:
#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
Gracias a
Vku que me pasó este dato acerca de cómo eliminar la dirección donde están alojados los archivos.
De igual modo hay que agregar antes de
]]></b:skin> lo siguiente:
#ymp-meta-album-title{display:none!important;}
Eliminar enlace de Yahoo! Search que aparece sobre el título de la canción
Cuando pasamos el cursor sobre el título de la canción vemos que aparece un enlace, este enlace nos lleva a la búsqueda de Yahoo! para encontrar la canción en cuestión.
Para eliminar este enlace buscamos antes de </head> el script que habíamos pegado anteriormente, o sea, este:
<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.
Como ves las ventajas de este reproductor son muchas, sobre todo por la forma tan simple de agregar canciones al reproductor.
La desventaja es que para crear distintas listas de reproducción es necesario saber crear archivos .XSPF que son listas de reproducción para reproductores en flash.
Enlace | Yahoo! Media Player
