Como personalizar Blogger parte 3 - Añadir un reproductor MP3

Este post se puede utilizar para insertar un MP3 tanto en el código HTML de una WEB como introducido como un elemento de HTML/JavaScript en Blogger. Los pasos son sencillos,
primeramente conviene disponer de las direcciones de Internet (URL) que apunten a los MP3 que queramos que se escuchen en el portal.

Una vez tengamos las direcciones, debemos obtener una dirección a un archivo flash que nos ofrezca un reproductor MP3, el que utilizo se encuentra en la siguiente dirección

http://www.estvideo.com/dew/media/dewplayer-multi.swf

A esta dirección le pasaremos por parámetro las URL de las canciones, podrían ser varias canciones, de esa manera tendremos una lista de reproducción y el usuario podrá ir avanzando por las canciones.

Los parámetros que utilizariamos serían los siguientes:

• autostart: determina si la canción empezará automaticamente al cargar la página, si le pasamos con valor 1
• mp3: listado de URL de las canciones separadas por el caracter '|'

El código Javascript y HTML sería el siguiente, teniendo en cuenta que se sustituirá el texto de 'URL del MP3' por la dirección que queramos poner, a la vez, en los enlaces podremos el título de la canción que hayamos elegido.

<script type="text/javascript">
function Cancion1()
{
content = '<object data="http://www.estvideo.com/dew/media/dewplayer-multi.swf?
autostart=1&mp3={URL del MP3}"
width="200" height="20" type="application/x-shockwave-flash">';
content += '<param value="http://www.estvideo.com/dew/media/dewplayer-multi.swf?
autostart=1&mp3={URL del MP3}"
name="movie"/>';
content += '</object>';
document.getElementById('player').innerHTML = content;
}

function Cancion2()
{
content = '<object data="http://www.estvideo.com/dew/media/dewplayer-multi.swf?
autostart=1&mp3={URL del MP3}"
width="200" height="20" type="application/x-shockwave-flash">';
content += '<param value="http://www.estvideo.com/dew/media/dewplayer-multi.swf?
autostart=1&mp3={URL del MP3}"
name="movie"/>';
content += '</object>';
document.getElementById('player').innerHTML = content;
}
</script>

<div id="enlaces"><a href="javascript:void(null)" onclick="Cancion1();
return false;"> TITULO DE LA CANCION </a><br/>

<a href="javascript:void(null)" onclick="Cancion2();return false;"> TITULO DE LA CANCION </a><br/>

<div id="player">
</div>

Un ejemplo del resultado de este código sería:

Audioslave - Be Yourself

Artículos relacionados