Jump to track in BarUI playlist SoundManager2

Question

So I've been searching all over the web for this, but didn't manage to find some propper documentation or enlightning answer. I'm trying to build a little online music player for fun and have gotten stuck on this simple task of jumping to a specific track in the BarUI playlist. For reference, here is the BarUI reference on the SoundManager2 page.

To add a little bit of detail on my particular question:

• I'm adding a bunch of tracks to the playlist (by appending corresponding li HTML elements) and they get added alright

• After adding these elements (tracks) in my BarUI playlist, I want to jump down to the first one and begin playing them, however I have no ideea on how to control the BarUI (by interacting directly with SoundManager API, I am able to do this but the BarUI player is not aware of what track is playing, so basically I am playing the songs in background which is not what I want)

Can anybody enlighten me on how can I jump to track or play track from the playlist of the BarUI ? (I imagine it should be just a matter of knowing which functions to call, as I am able to do this manually by scrolling down to the track and clicking the play btn)

I hope it's not a very stupid question. I'll keep trying and post up the answer if I manage to come up with something useful. Thanks.

Answer 1

So after some reading and searching (found the very, very useful community forum of SoundManager2 here), I found out that the Bar UI is still a bit of a work in progress (there was no propper API yet and some features were missing).

I ended up simulating a click event on the link added with my li track elements to the Bar UI playlist. I'm sure there must have been some way to call/expose the methods in bar-ui.js, but I found this the most straightforward way. For more complex tasks, it might be necessary to edit the bar-ui.js file directly.

So, what I did was:

• append tracks (li elements) to current playlist

      // I'm doing an Ajax call to retrieve the tracks data (JSON or sth)
      // and place it in appropriate variables, in my case trackName...
      var trackName = data.TrackName;
      var trackUrl = data.TrackStreamUrl;
      var trackId = data.Id;
      var trackListItemHtml = '';
  
      // if this is the first track from the bunch of tracks we are 
      // about to add, we want it to be selected in the playlist 
      // and begin play from here
      if (selectedToPlayNext) {
          $('.sm2-playlist-bd li').removeClass('selected');
          trackListItemHtml = '<li class="selected"><a id="selected_track_link"  href="' + trackUrl + '"><b>' + trackName + '</b></a></li>';
      } else {
          // else, we want basic li elements containing links to the tracks
          trackListItemHtml = '<li><a href="' + trackUrl + '"><b>' + trackName + '</b></a></li>';
      }
  
      // append new track to our playlists
      $('.sm2-playlist-wrapper .sm2-playlist-bd').append(trackListItemHtml);
  

• begin play on newly added tracks (starting from topmost, i.e. selected)

       // we do this using plain Javascript (instead of JQuery selectors)
       // because for some reason JQuery doesn't want to trigger click 
       // event on plain text inside a **html link** element
       document.getElementById('selected_track_link').click();
  

Probably not the best way to do it, but it did the trick. Help would be appreciated though (for shuffling or programatically triggering next in the Bar UI playlist without actual interaction with the player)