//<![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()}
//]]>
#playlist, #player {
width: 400px; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
/* Imagen de fondo del primer contenedor */
background: url(//lh3.googleusercontent.com/-9dx_GmP6Yeg/U06qBO9M4EI/AAAAAAAAFEY/FXrhlltF7xc/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Ancho del reproductor */
margin:0 auto;
display: inline-block
}
#player:after {
/* Imagen animada */
content: url(//lh3.googleusercontent.com/-KoD5KVOAsGQ/U1B_dWFttoI/AAAAAAAAFFc/uJ3SjLPlDHQ/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Fondo del segundo contenedor */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; /* Estilos de fuente */
font-family: 'Trebuchet MS', Trebuchet, Verdana, 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: #222; /* Fondo de las canciones */
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Color de la canción activa */
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Color de la canción activa al pasar el cursor */
}
Y EL HTML ES ESTE
<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='file:///C:/Documents%20and%20Settings/Martin/Mis%20documentos/Mi%20m%C3%BAsica/07_Post_Crucifixion_Pescado_Rabioso_Spinetta_Y.mp3' type='audio/mp3'/>
Hola, tu navegador no está actualizado y no puede mostrar este contenido.
</audio>
</div>
<ul id='playlist'>
<li class='active'><a href='file:///C:/Documents%20and%20Settings/Martin/Mis%20documentos/Mi%20m%C3%BAsica/07_Post_Crucifixion_Pescado_Rabioso_Spinetta_Y.mp3'>Poscruxificcion-Pescado rabioso</a></li>
<li><a href='file:///C:/Documents%20and%20Settings/Martin/Mis%20documentos/Mi%20m%C3%BAsica/Alto%20en%20la%20torre%20-%20Sui%20Generis.mp3'>Alto en la orre- Sui generis</a></li>
<li><a href='file:///C:/Documents%20and%20Settings/Martin/Mis%20documentos/Mi%20m%C3%BAsica/Desconfio_De_La_Vida_Pappo_Charly_Garcia_Y.mp3'>desconfio de la vida - Pappo</a></li>
</ul>
el problema es que los temas no quedan dentro del reproductor... la idea es que queden adentro y si es posible que al darle play se reproduzcan luego del seleccionado los demas en forma aleatoria... aunque si se reprocuen despues del seleccionado ya estoy contento
mi agradecimiento por anticipado
