CODEWITHSUNDEEP
apiwidgetsoundcloud
Ilja
Ilja

Reputation: 21

Custom Soundcloud Widget (api) Player

I'm trying to create a custom player for some Soundcloud tracks. The idea is to hide the Iframe and create a few players to play different tracks. The loading and playing all works fine but I have two challenges.

  1. How do I create a progressbar (SC.Widget.Events.PLAY_PROGRESS)
  2. How do I create a download link?

A snippet from the way I'm coding this:

    (function(){
    var widgetIframe = document.getElementById('sc-widget'),
        widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function() {

    $('#play').click(function(){
        widget.play();
    });
});  }());

To bad the OPEN API is closed..

Upvotes: 0

Views: 1543

Answers (1)

Brian Guggenheimer
Brian Guggenheimer

Reputation: 233

If you are trying to stream tracks using a custom player, I recommend you do not use the widget at all. Rather, use the streaming SDK directly. There are methods there that can do everything you need to load, play, pause, seek, get the current time of the song and more.

To initialize the streaming player, you can do something like:

SC.initialize({
  client_id: "<client id>"
});

SC.stream("/tracks/" + song_id).then(function (player) {
  player.play();
}

To build the actual progress bar, you can do something inside your stream function like the following (this example uses JQuery but you don't need to):

player.on("time", function () {
    var current_time = player.currentTime();
    var current_duration = player.options.duration;
    $(".scrubber .scrubber_fill").css("width", ((current_time / current_duration) * 100) + "%");
});

Upvotes: 1

Related Questions