Question

I created a custom player with the soundcloud’s custom javascript plugin and everything works well so far. The custom player works with a single link which provides the link to the mix or song you want to include to your page, example:

<a href="http://soundcloud.com/matas/hobnotropic" class="sc-player">My new dub track</a> 

But now that I’m working on the final page with Ajax to load the pages dynamically the player (which is inside the loaded content) disappears after the page has loaded.

For the reason that I’m not familiar with how the custom player catches it’s data and this is the first time experimenting with Ajax and pushstate I’m trying to find out what I have to additional add to my Ajax that the play will still work.

Here’s the ajax I’m using:

    $(function(){
        var replacePage = function(url) {
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                success: function(data){
                    var dom = $(data);
                    var title = dom.filter('title').text();
                    var html = dom.filter('#content').html();
                    $('title').text(title);
                    $('#content').html(html);
                }
            });
        }

        $('nav a').live('click', function(e){
            history.pushState(null, null, this.href);
            replacePage(this.href);
            e.preventDefault();
        });

        $(window).bind('popstate', function(){
            replacePage(location.pathname);
        });
    });

Answer 1

Ok, here’s the answer. Of course I have to call the player again after the call with the following inside the success of the ajax call:

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