Soundcloud custom player add and play song dynamic

Question

I am using soundcloud custom player to create a player which can play all the songs on my site. This works pretty good when i just place static url of any track or a post. But what i want is to add the song to the list dynamically.

I have done lots of research but couldn't get it to work. What i want is there would be multiple players through out the site. kind of(http://soundcloud.com) and there would a main player on the top(like soundcloud) which would play around 100 latest songs on site and there would be a smaller player clicking on which will just append that song to the list and start playing that song.

I am not sure if this is the right process. If any one can just give me any hint how i can proceed further then it would be great.

Answer 1

I'll try to give you as much info as I can, but as there's nowhere to start, I'm not sure if it will help. It's important to start with the wiki. This is what I could extract from there:

Dynamic Track Loading

The player can be created on the fly, and therefore any url can be added. In order to do that, the following methods are available:

Appending directly to the element:

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

or Create the object and append 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 little example 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 that should solve the dynamic track loading.

Initializing scPlayer

It's important to take into account that the scPlayer must load itself, and therefore will not work if you change the url directly with jQuery. In order to initialize the scPlayer, which takes place once the DOM has loaded, you can use

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

or

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

Default loading takes place, as I said, on DOM load with the following method

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

This default behaviour can be changed as follows:

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

---

That's what I've got up to now. Try to get the scPlayer working (loading songs dynamically) and we can follow with the data load and all that stuff.

Answer 2

After doing a lot of research in the Wiki, studying the code in sc-player.js, and some testing, I think I've found a solution to your problem. Try the following:

First, add this code to sc-player.js file, just before the comment // the default Auto-Initialization (this line is just like 8 lines before 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, takes care of adding a new track to the playlist and starts playing the track.

Now, suppose you have this html code for the 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>

Make sure to wrap your sc-players in a div, preferably with an id, so you can reference the players later in Javascript:

Finally, you can use this Javscript code to detect when a track is clicked in smallPlayer and add and play that 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);
        });
    });
});

And that's It!.

EDIT

If you only have the url of the song to be added, you can do the following:

First, add this other function to sc-player.js file, just 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 urls of the songs:

<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 playing 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 that's all that is needed.