CODEWITHSUNDEEP
javascriptjqueryajaxevent-handlingaudiojs
user3741085
user3741085

Reputation: 99

jQuery and Audio.js: song dynamically added to playlist not playing or recognizing

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: 

 <script>
 $("ul#mainSite li").on("click", "a", function(e){

     e.preventDefault();


      var addLink = $(this).attr('data-src');


      $("ol#userPlaylist").append('<li> <a href="#" data-src="'+addLink+'">NEW 
          SONG</li>');

     });

 </script>

Upvotes: 1

Views: 4400

Answers (1)

Raxa
Raxa

Reputation: 382

If I understand you correctly your problem is that the player is not related on your lists. Since the player is a SWF player you had to control the player (feed it an start playing).

The magic lays in:

audio.load($('a', next).attr('data-src'));
audio.play();

Full code:

http://kolber.github.io/audiojs/audiojs/audio.js

To help you further please read and UNDERSTAND the full code of your demo (download everything and play with the code)

http://kolber.github.io/audiojs/demos/test6.html

and you will find very soon your answer.

Upvotes: 0

Related Questions