Hi,
I'm building a web application that allows browsing through soundcloud
users tracks entirely with ajax, the goal is to be able to add tracks
on the fly to the custom player. (working with rails 3.0 and jQuery)
I had no problems implementing the custom player as described in the
documentation, but I can't figure out how to add tracks to an existing
playlist.
To do that, my approach has been so far to collect the track details
using the api on the server side, then generate links to add the
tracks setting required values using html5 data attributes:
<%= link_to "add","#",:class=>'add_track',"data-
url"=>item['permalink_url'] ,"data-title"=>item['title'] , 'data-
duration'=>item['duration'], 'data-artwork'=>item['artwork_url'],'data-
sc-track'=>item.to_json %>
After observing the code generated and the source of sc-player.js, I
created a function that creates a new element in the playlist like
this:
$('.add_track').live("click",function(){
// collect datas from the track
var url=$(this).data("url");
var title=$(this).data("title");
var artwork=$(this).data("artwork");
var duration=$(this).data("duration");
var track=$(this).data("sc-track");
// player's tracklist
var $tracklist=$('.sc-trackslist');
// player's artwork list
var $artlist=$('ol.sc-artwork-list');
// current number of elements
var listSize=$('.sc-trackslist li').size();
// index of the new track to be aded
var idx=listSize-1;
// append the new track in the playlist
$('<li><a href="' + url +'">' + title + '</a><span class="sc-track-
duration">' + timecode(duration) + '</span></li>').data('sc-track',
{id:listSize}).appendTo($tracklist);
// append the artwork to the artwork list
$('<li><img src='+artwork+'></li>').data("sc-
track",track).appendTo($artlist);
return false;
});
This 'almost' works, the track is correcly added to the playlist, but
I get an error when I try to play it ('track is undefined' sc-
player.js line 295)
It was maybe a bit naive to expect this to work, I used a logic
learned from the
http://www.jplayer.org/ way to add tracks to the
playlist, but it looks like I missed something and the scPlayer must
be refreshed.
Is there a way I can achieve this without modifying the original sc-
player.js ?
cheers
julien