Buenas amigos de fdw, estoy con un problema, espero puedan ayudarme.
Tengo un reproductor en el index
Código HTML:
<audio id="audio" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="">
</audio>
Con su playlist
Código HTML:
<div id="lista" class="lista">
<ol id="canciones">
<li><a href="Kalimba.mp3">Ravel Bolero</a></li>
<li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
<li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
</ol>
</div>
Y le agregaba canciones presionando un botón que estaba en el mismo index
Código:
<script>
$( document ).ready(function() {
$("#addsong").click(function(){
$("#canciones").append("<li><a href='Kalimba.mp3'>Ravel Bolero</a></li>");
});
});
</script>
Reproductor
Código:
<script>
var audio;
var lista;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('audio');
lista = $('#lista');
tracks = lista.find('li a');
len = tracks.length - 1;
audio[0].volume = 1;
audio[0].play();
lista.on('click','a',function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = lista.find('a')[0];
}else{
link = lista.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
El problema ahora lo tengo al querer agregar canciones desde otro archivo. Le doy agregar, se agrega al playlist, pero tengo problemas para reproducirlo, no hace nada directamente, por lo cual no puedo darme cuenta cuál es el error, si es que hay que recargar el script o que ._. si alguno ve algo mal en el código, espero me de una mano. Desde ya, muchas gracias gente!