playlist dinamico con etiqueta audio y jquery hola a todos estoy tratando de crear un playlist de audio con jquey y una base de datos mysql para hacer que la lista de audio sea dinamica. Tengo hecho algo pero me he encontrado con un problema, utilzo el evento ended cuando finaliza la cancion para recargar un div con la nueva informacion de la base de datos y es ahi cuando me quedo atascado porque el reproductor no pasa a la siguiente cancion. Coloco el codigo que tengo y os agradeceria cualquier sugerencia.
Este es el codigo html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ROCOLA WEB</title>
<link rel="stylesheet" type="text/css" href="css/reproductor.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/xxx.js"></script>
</head>
<body>
<div id="cajageneral">
<div id="divControles">
<button id="btnReproducir" class="botones"><img src="img/reproducir.png"></button>
<button id="btnPausar" class="botones"><img src="img/pausar.png"></button>
<button id="btnAnterior" class="botones"><img src="img/anterior.png"></button>
<button id="btnSiguiente" class="botones"><img src="img/siguiente.png"></button>
<button id="btnBajarVolumen" class="botones"><img src="img/bajar-volumen.png"></button>
<button id="btnSubirVolumen" class="botones"><img src="img/subir-volumen.png"></button>
<button id="btnSilencio" class="botones"><img src="img/silencio.png"></button>
<button class="botones1"><div id="contador"></div></button>
</div>
<div id="divProgreso">
<div id="divBarra"></div>
</div>
<audio id="audio" ></audio>
<div id="divLista">
<ol id="olCanciones">
<?php
include ('conectar.php');
$sql ="SELECT * FROM sesion, musica where sesion.id_cancion = musica.id_cancion ";
$enviar = mysql_query($sql, $conectar);
while ($dato=mysql_fetch_array($enviar)) {
?>
<li rel="musica/<?php echo $dato ['ubicacion'];?>"><strong><?php echo $dato ['titulo'];?></strong></li>
<?php
}
mysql_free_result($enviar);
mysql_close($conectar);
?>
</ol>
</div>
</div>
</body>
</html>
aqui el archivo xxx.js
$(document).ready(function(){
var audio = $('audio')[0];
var cancionactual=0;
//evento que se dispara al finalizar la reproduccion
$("#audio").on('ended', function(){
$("#divLista").load(reca.php);
$.siguiente();
});
$.reproducir = function(){
var objContenedorCancion=$('#olCanciones li').eq(cancionactual);
audio.src=objContenedorCancion.attr('rel');
objContenedorCancion.addClass('reproduciendo').sib lings().removeClass('reproduciendo');
audio.play();
};
//reproducir el siguiente archivo de la lista
$.siguiente = function(){
if(cancionactual<$('#olCanciones li').length-1){
cancionactual++;
}else{
cancionactual=0;
}
$.reproducir();
};
//reproducir el anterior archivo de la lista.
$.anterior = function(){
if(cancionactual>=1){
cancionactual--;
}else{
cancionactual=$('#olCanciones li').length-1;
}
$.reproducir();
};
});
Espero que le podais hechar un vistazo, gracias de antemano
