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

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Calendario de cubo

Calendario de cubo

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017

La API de archivos en JavaScript - accediendo al contenido

La API de archivos en JavaScript - accediendo al contenido

En esta entrada presentaremos una API para la lectura de los archivos cargados mediante input type="file" u otros métodos como el Drag and Drop con JavaScript.

Andrés Cruz 09-02-2016

anime.js para realizar animaciones con JavaScript

anime.js para realizar animaciones con JavaScript

Se explica cómo usar la librería para animaciones para JavaScript llamada anime.js en base a un sencillo experimento.

Andrés Cruz 24-08-2016