Problem using append in audioplayer
Hi everybody! I'm trying to put sources in a audio playlist with append() but doesen't work. I can put the audios, but then the script of audioplayer not affect them
Script to add songs to the track div
<script>
$(
document ).ready(function() {
$(
"#addsong").click(function(){
$(
"#tracks").append("<li><a href='Kalimba.mp3'>Ravel Bolero</a></li>");
$(
"#tracks").height();
});
});
</script>
Audio player
Script to add songs to the track div
<script>
$(
document ).ready(function() {
$(
"#addsong").click(function(){
$(
"#tracks").append("<li><a href='Kalimba.mp3'>Ravel Bolero</a></li>");
$(
"#tracks").height();
});
});
</script>
Audio player
<audio id="audio" tabindex="0" controls="" type="audio/mpeg"> <source type="audio/mp3" src=""> </audio> <!-- Playlist --> <div id="playlist"> <div id="lista" class="lista"> <ol id="tracks"> <li><a href="Kalimba.mp3">Ravel Bolero</a></li> </ol> </div> </div> <div> <input type="submit" id="addsong"> </div>
Script of audioplayer and playlist
<script>
var
audio;
var
playlist;
var
tracks;
var
current;
init();
function
init(){
current = 0;
audio = $('audio');
playlist = $('#lista');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = 1;
audio[0].play();
playlist.find('a').click(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 = playlist.find('a')[0];
}else{
link = playlist.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>
This add a new song, but when I click on the song to play, I redirected to the href.
Any idea? Thx!!!!!
<script>
var
audio;
var
playlist;
var
tracks;
var
current;
init();
function
init(){
current = 0;
audio = $('audio');
playlist = $('#lista');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = 1;
audio[0].play();
playlist.find('a').click(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 = playlist.find('a')[0];
}else{
link = playlist.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>
This add a new song, but when I click on the song to play, I redirected to the href.
Any idea? Thx!!!!!