Soundcloud is a legal music distribution platform that has gained a lot of strength in recent years; Soundcloud has many features that seem more like social networks such as comments section, users, favorites, sharing, etc; It also has an API that we can integrate into our applications; you can check the following link Soundcloud Widget API and see everything it offers.

In this post we are going to work with the API that is provided for JavaScript, the most interesting or important thing about this API is to use its huge library of songs in our application without having to worry about legal issues through widgets.

The first thing we need to do is include the Soundcloud JavaScript API:

<script src="https://w.soundcloud.com/player/api.js"></script>

We can now use the SC.Widget method provided by the JavaScript API to embed the widgets as follows:

var widgetUrl = "http://api.soundcloud.com/users/1539950/favorites";
var iframe = document.querySelector('.iframe');
iframe.src = location.protocol + "//w.soundcloud.com/player/?url=" + widgetUrl;
var widget = SC.Widget(iframe);

Detecting the completion of the widget's music playback with an event in JavaScript

The Soundcloud API in JavaScript has a large number of events as we can see below:

• SC.Widget.Events.LOAD_PROGRESS Runs periodically while the song is being loaded.
• SC.Widget.Events.PLAY_PROGRESS Runs periodically while the song is playing.
• SC.Widget.Events.PLAY Called when the song is played.
• SC.Widget.Events.PAUSE Executed when the song is paused.
• SC.Widget.Events.FINISH Executed when the song finishes playing.

In my opinion, the most interesting or useful of all could be the one that determines when the song ended, since as a result of this we can establish a series of actions such as loading other songs, showing an advertisement, etc:

widget.bind(SC.Widget.Events.FINISH, function (eventData) {    // hacer algo });

Detecting the Ready state of the widget's music playback

Also, if we are interested in starting the playback as soon as our widget is loaded and ready, we can use the following JavaScript code:

 widget.bind(SC.Widget.Events.READY, function (eventData) {
    widget.play();
});

Updating widget songs with load function in JavaScript

Now, if we want to update the song at the end of the song as if it were a playlist:

widget.load($($('.lista_canciones li')[index]).attr("data-href"), {auto_play: true});

And we include it within our finish event

widget.bind(SC.Widget.Events.FINISH, function (eventData) {
    // mas codigo                

    widget.load($($('.lista_canciones li')[index]).attr("data-href"), {auto_play: true});
});

With this we create the widget is our application with the URL provided.

Use of URLs in Soundcloud

As we can see, we use a URL, which matches the URL of the song to be displayed or a group of songs, in our example we specify the favorite songs of a user:

http://api.soundcloud.com/users/1539950/favorites

But we can also specify individual songs:

https://soundcloud.com/davidguetta/david-guetta-ft-sam-martin-dangerous-robin-schulz-remix-radio-edit

With everything we have seen so far, it is more than enough to create our own basic player, loading/updating songs on demand or every time a song ends, as well as a series of events that will allow us to further customize the interaction with the user.