dynamically add tracks to the custom player

178 views
Skip to first unread message

jujudellago

unread,
Sep 22, 2011, 6:25:39 AM9/22/11
to SoundCloudAPI
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



Matas Petrikas

unread,
Sep 22, 2011, 7:22:21 AM9/22/11
to soundc...@googlegroups.com
hi julien,

unfortunately, the custom player has no way of dynamically add track to already created player yet.
we might add that as a feature. I would suggest you create a github issue for that, so it does not get lost:

as for now, I would propose you would just create a new player after existing one, so once the previous track is done, it would jump to the new one. you could use the css to style player that have no .playing class so they look more like playlist entries.

greets,
Matas




--
You received this message because you are subscribed to the Google Groups "SoundCloudAPI" group.
To post to this group, send email to soundc...@googlegroups.com.
To unsubscribe from this group, send email to soundcloudap...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/soundcloudapi?hl=en.




--
Matas Petrikas


http://soundcloud.com/matas


jujudellago

unread,
Sep 22, 2011, 12:36:43 PM9/22/11
to SoundCloudAPI
Hi Matas,

Thanks a lot for your answer !

I made a feature request as suggested on github, and until it can be
solved, I followed your advice, and changed the logic to add single
players and it works great.

cheers

julien










On Sep 22, 1:22 pm, Matas Petrikas <matas.petri...@gmail.com> wrote:
> hi julien,
>
> unfortunately, the custom player has no way of dynamically add track to
> already created player yet.
> we might add that as a feature. I would suggest you create a github issue
> for that, so it does not get lost:https://github.com/soundcloud/soundcloud-custom-player/issues
>
> as for now, I would propose you would just create a new player after
> existing one, so once the previous track is done, it would jump to the new
> one. you could use the css to style player that have no .playing class so
> they look more like playlist entries.
>
> greets,
> Matas
>
> > learned from thehttp://www.jplayer.org/ way to add tracks to the
Reply all
Reply to author
Forward
0 new messages