Soundcloud custom player dynamically adds and plays a song

Question

I use a custom soundcloud player to create a player that can play all the songs on my site. This works very well when I just post the static URL of any track or message. But I want to add a song to the list dynamically.

I did a lot of research, but could not get it to work. I want a lot of players through the site. ( http://soundcloud.com ), and there will be a main player on it (for example, soundcloud), who would play about the last 100 songs on the site and there would be a smaller player, clicking on which would simply add this song to the list and start playing this song.

I am not sure if this is the right process. If anyone can just give me some hint how I can proceed further, then it will be great.

Answer 1

Having done a lot of research on the Wiki, studying the code in sc-player.js and some tests, I think I found a solution to your problem. Try the following:

First add this code to the sc-player.js immediately before the comment // the default Auto-Initialization (this line will be like 8 lines to the end of the file)

 $.scPlayer.loadTrackInfoAndPlay=function($elem,track){ var playerObj=players[$elem.data('sc-player').id]; playerObj.tracks.push(track); var index =playerObj.tracks.length-1; var $list=$(playerObj.node).find('.sc-trackslist'); var $artworks=$(playerObj.node).find(".sc-artwork-list"); // add to playlist var $li=$('<li><a href="' + track.permalink_url +'">' + track.title + '</a><span class="sc-track-duration">' + timecode(track.duration) + '</span></li>') .data('sc-track', {id:index}) .appendTo($list); // add to artwork list $('<li></li>') .append(artworkImage(track, true)) .appendTo($artworks) .data('sc-track', track); $li.click(); } 

The function above will take care of adding a new track to the playlist and start playing the track.

Now suppose you have this HTML for players

 <h2>Top Player</h2> <div id="topPlayer"> <div class="sc-player"> <a href="http://soundcloud.com/matas/matas-petrikas-live-at-gravity-club-30-05-2008">My live track</a> <a href="http://soundcloud.com/matas/on-the-bridge">On the bridge</a> </div> </div> <h2>Small Player</h2> <div id="smallPlayer"> <a href="http://soundcloud.com/forss/sets/soulhack" class="sc-player">Soulhack</a> </div> 

Be sure to wrap the sc-player in a div , preferably with id , so you can later refer to players in Javascript:

Finally, you can use this Javscript code to determine when a track is clicked in smallPlayer , and add and play this track in topPlayer

 $(function(){ var $topPlayer=$("#topPlayer .sc-player");//Top player var $smallPlayer=$("#smallPlayer .sc-player");//Small Player $smallPlayer.on("onPlayerInit.scPlayer",function(evt){//When player is ready $smallPlayer.on("onPlayerTrackSwitch.scPlayer",function(evt,track){//Listen to track switch in smallPlayer setTimeout(function(){//Wait a bit, to avoid playing problems between both players $.scPlayer.loadTrackInfoAndPlay($topPlayer, track); },250); }); }); }); 

What is it!.

EDIT

If you only have the URL of the song you want to add, you can do the following:

First add this other function to the sc-player.js immediately after the previous loadTrackInfoAndPlay function:

 $.scPlayer.loadTrackUrlAndPlay=function($elem,url){ var apiUrl = scApiUrl(url, apiKey); $.getJSON(apiUrl, function(data) { if(data.duration){ data.permalink_url = url; $.scPlayer.loadTrackInfoAndPlay($elem,data);//Call the previous function } }); } 

Now suppose you have this code for the song urls:

 <p> The links <br /> <a class="songUrl" href="https://soundcloud.com/feintdnb/coldplay-fix-you-feint-bootleg">Coldplay-Fix you</a><br /> <a class="songUrl" href="https://soundcloud.com/nct-1/nct-you-preview-out-soon-for">NCT - You</a><br /> <a class="songUrl" href="https://soundcloud.com/tufftouch/devil-eyes-konflix-feat-leanne">Konflix - Devil Eyes</a> </p> 

Then you can use this code to add the song to the playlist and start playing it (or just play it if it already exists)

 $(".songUrl").click(function(event){ event.preventDefault(); var url=$(this).attr("href");//Url of the song //If the song is in the tracks list, this line finds it var $theSong=$topPlayer.find(".sc-trackslist a[href='"+url+"']"); if($theSong.length==0){// $.scPlayer.loadTrackUrlAndPlay($topPlayer,url ); }else{ $theSong.parent().click();//Fire click = play the song } }); 

And all that is needed.

Answer 2

I will try to provide you as much information as I can, but since there’s nowhere to start, I’m not sure if this will help. It is important to start with a wiki . Here is what I could learn from this:

Dynamic track loading

A player can be created on the fly, and therefore any URL can be added. The following methods are available for this:

Adding directly to an element:

  $('div.your-container-class').scPlayer({ links: [{url: "http://soundcloud.com/matas/hobnotropic", title: "http://soundcloud.com/matas/hobnotropic"}] }); 

or Create an object and add to where you want:

  var $myPlayer = $.scPlayer({ links: [{url: "http://soundcloud.com/matas/hobnotropic", title: "http://soundcloud.com/matas/hobnotropic"}] }); $myPlayer.appendTo($('#somewhere-deep-in-the-dom')); 

A small example that I just found:

  $(function() { $('a.sc-remote-play1').on('click', function(event) { $('.sc-player').scPlayer({ links: [{url: "http://soundcloud.com/matas/hobnotropie", title: "Hobnotropic"}], }); }); }); 

I believe this should solve the dynamic loading of tracks.

ScPlayer initialization

It is important to keep in mind that scPlayer must load itself, and therefore will not work if you change the URL directly using jQuery. To initialize scPlayer, which takes place after loading the DOM, you can use

 $('a.your-link-class').scPlayer(); 

or

 $('div.your-container-class').scPlayer(); 

The default download occurs, as I said, when loading the DOM in the following way.

 $('a.sc-player, div.sc-player').scPlayer(); 

This default behavior can be changed as follows:

 $.scPlayer.defaults.onDomReady = function(){ // Default behaviour wanted. Per default we have: $('a.your-link-class').scPlayer(); }; 

---

Here is what I still have. Try to get scPlayer to work (load songs dynamically), and we can monitor data loading and all that.