DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
27-04-2017

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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Algunos artículos que te pueden interesar

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015

Recortes de imágenes con HTML5 y jQuery

Recortes de imágenes con HTML5 y jQuery

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery.

Andrés Cruz 07-05-2014