Soundcloud es una plataforma de distribución de música de manera legal que ha cobrado bastante fuerza en los últimos años; Soundcloud cuenta con muchas características que parecen más de redes sociales como sección de comentarios, usuarios, favoritos, compartir, etc; ademas dispone de una API que podemos integrar en nuestras aplicaciones; puedes consultar el siguiente enlace Soundcloud Widget API y ver todo lo que ofrece.

En esta entrada vamos a trabajar con la API que está provista para JavaScript, lo más interesante o importante de esta API es emplear su inmensa biblioteca de canciones en nuestra aplicación sin necesidad de preocuparnos por temas legales a través de widgets.

Lo primero que debemos hacer es incluir la API JavaScript de Soundcloud:

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

Ahora podemos emplear el método SC.Widget provisto por la API de JavaScript para integrar los widgets de la siguiente manera:

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);

Detectando la finalización de la reproducción de la música del widget con un evento en JavaScript

La API de Soundcloud en JavaScript cuenta con una gran cantidad de eventos como podemos ver a continuación:

• SC.Widget.Events.LOAD_PROGRESS Se ejecuta periódicamente mientras la canción está siendo cargada.
• SC.Widget.Events.PLAY_PROGRESS Se ejecuta periódicamente mientras la canción está siendo reproducida.
• SC.Widget.Events.PLAY Se ejecuta cuando la canción se reproduce.
• SC.Widget.Events.PAUSE Se ejecuta cuando la canción se coloca en pausa.
• SC.Widget.Events.FINISH Se ejecuta cuando la canción finaliza su reproducción.

A mi criterio el más interesante o útil de todos podría ser el que determina cuando finalizó la canción, ya que a raíz de esto podemos establecer una serie de acciones como cargar otras canciones, mostrar un anuncio publicitario etc:

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

Detectando el estado Ready (listo) del reproducción de la música del widget

También Si nos interesa iniciar la reproducción apenas esté cargado y listo nuestro widget podemos emplear el siguiente código JavaScript:

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

Actualizando las canciones del widget con la función load en JavaScript

Ahora, si deseamos actualizar las canción al finalizar la canción como si de una lista de reproducción se tratase:

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

Y lo incluimos dentro de nuestro evento de finalizar

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

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

Con esto creamos el widget es nuestra aplicación con la URL proporcionada.

Uso de las URLs en Soundcloud

Como vemos empleamos una URL, la cual coincide con la URL de la canción a mostrar o grupo de canciones, en nuestro ejemplo especificamos las canciones favoritas de un usuario:

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

Pero también podemos especificar canciones individuales:

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

Con todo lo que hemos visto hasta el momento es más que suficiente para crear nuestro propio reproductor básico, cargando/actualizando canciones bajo demanda o cada vez que finalice una canción, además de una serie de eventos que nos permitirán personalizar más la interacción con el usuario.