I have been using audio.js to make dynamic playlist. When a user clicks on a link in an Un-Ordered List, it is added to a Ordered list ( <ol> ) that servers a the audio players playlist.

I have the jQuery working, adding the new list item from the Un-Ordered list to the Ordered list. However, the player does not play the newly-added song when clicked, and it doesn't go to it as the next track.

The audio player only plays the songs that were initially in its playlist when the website was loaded, but does not recognize the songs I have added after loading. Any help?

Here is a link to the audio.js example playlist: http://kolber.github.io/audiojs/demos/test6.html

Here is a link to my version with jQuery-added songs: http://tinyurl.com/kg9clpb

Audio.js Demo Source Code for setting up player:

<script> $(function() { // Setup the player to autoplay the next track var a = audiojs.createAll({ trackEnded: function() { var next = $('ol li.playing').next(); if (!next.length) next = $('ol li').first(); next.addClass('playing').siblings().removeClass('playing'); audio.load($('a', next).attr('data-src')); audio.play(); } }); // Load in the first track var audio = a[0]; first = $('ol a').attr('data-src'); $('ol li').first().addClass('playing'); audio.load(first); // Load in a track on click $('ol li').click(function(e) { e.preventDefault(); $(this).addClass('playing').siblings().removeClass('playing'); audio.load($('a', this).attr('data-src')); audio.play(); }); // Keyboard shortcuts $(document).keydown(function(e) { var unicode = e.charCode ? e.charCode : e.keyCode; // right arrow if (unicode == 39) { var next = $('li.playing').next(); if (!next.length) next = $('ol li').first(); next.click(); // back arrow } else if (unicode == 37) { var prev = $('li.playing').prev(); if (!prev.length) prev = $('ol li').last(); prev.click(); // spacebar } else if (unicode == 32) { audio.playPause(); } }) }); </script>

HTML for Aud-oplayer and Both lists:

<audio ></audio> <h2>Playlist</h2> <ol id="userPlaylist"> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">dead wrong intro</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li> <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li> </ol> <h3>Songs Not it Playlist - Click to add to Playlist</h3> <ul id="mainSite"> <li><a href="#" data-src="http://www.jussbuss.tv/testing/sapi/mp3/john-fenton_dive-table.mp3">john-fenton_dive-table</a></li> </ul>

My code for adding a song from another list on click: