Control SoundCloud custom player remotely in the DOM

SoundCloud custom player remote control

    <a href="#" class="sc-remote-link">Toggle player</a>


    <!-- add a customizable remote control button -->
    <script type="text/javascript">
      
      $(function() {
        // sc-player remote control simulates the click on the play/pause button
        $('a.sc-remote-link').live('click', function(event) {
          var $link = $(this),
              $pause = $('.playing a.sc-pause');
              
          if ($pause.length) {
            $pause.click();
          }else{
            $('a.sc-play:first').click();
          }
          return false;
        });
        
        // update the remote buttons class, when changing player state
        var toggleLink = function(event) {
          $('a.sc-remote-link').toggleClass('playing', event.type === 'scPlayer:onMediaPlay');
        };
        $(document)
          .bind('scPlayer:onMediaPlay', toggleLink)
          .bind('scPlayer:onMediaEnd', toggleLink)
          .bind('scPlayer:onMediaPause', toggleLink);
      });
  
    </script>

Check out my app Mote.io which uses similar hacks to control SoundCloud via dom. The extension is open source here: https://github.com/ianjennings/mote.io-extension