/////////////////////////////////////////////////////////////////////////////////////////
Primer codigo:
Codigo que va en la plantilla de blogger antes de la etiqueta: ]]></b:skin>
/////////////////////////////////////////////////////////////////////////////////////////
#playlist, #player {
width: 90%; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
background:#232323; /* Fondo del primer contenedor */
padding: 10px 20px;
}
audio {
width:95%; /* Ancho del reproductor */
background: #f1f3f4;
margin:0 auto;
display: inline-block
}
#player:after {
/* Imagen animada */
padding-left: 20px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #23a6b3; /* Fondo del segundo contenedor */
border-top: 1px solid #fff;
text-align: left;
font-size: 14px; /* Estilos de fuente */
font-family: 'Arial', Helvetica, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #ccc; /* Color de las canciones */
background: #232323; /* Fondo de las canciones */
padding: 7px 2px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #23a6b3; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#playlist .active a {
color: #fff; /* Color de la canción activa */
font-style: Georgia;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #fff; /* Color del icono Play */
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #000; /* Color de la canción activa al pasar el cursor */
}
/////////////////////////////////////////////////////////////////////////////////////////
Segundo codigo:
Este codigo tambien va en la plantilla de blogger antes de la equiteta </body>
/////////////////////////////////////////////////////////////////////////////////////////
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
/////////////////////////////////////////////////////////////////////////////////////////
Tercer codigo:
Codigo HTML que se usara para colocar en un gadgest o una entrada de tu blog :
/////////////////////////////////////////////////////////////////////////////////////////
<div id="player">
<audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">
<source src=" URL PRIMER TEMA " type="audio/mp3"></source>
</audio>
</div>
<ul id="playlist">
<li class="active"><a href=" URL PRIMER TEMA "> NOMBRE DEL PRIMER TEMA </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id= ID Google Drive "> NOMBRE DEL TERCER TEMA </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id= ID Google Drive "> NOMBRE DEL TERCER TEMA </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id= ID Google Drive "> NOMBRE DEL TERCER TEMA </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id= ID Google Drive "> NOMBRE DEL TERCER TEMA </a></li>
</ul>
/////////////////////////////////////////////////////////////////////////////////////////
Codigo Adicional:
Linea que puedes agregar dependiendo del numero de canciones Antes de la etiqueta de cierre: </ul>
/////////////////////////////////////////////////////////////////////////////////////////
<li><a href=" URL OTRO TEMA "> NOMBRE DE OTRO TEMA </a></li>
Post a Comment