Como hacer un reproductor usando Rdio

Siguiendo con la tendencia musical de los tutoriales, decidí escribir este nuevo artículo enfocado a aprender a usar la API de Rdio y nuevamente, hacer un reproductor musical.

Para comenzar haremos un recuento del tutorial anterior y luego nos enfocaremos a implementar la API de Rdio sobre el diseño que ya conocemos. Al final de todo, les mostraré un diseño adicional que hizo solo porque puedo.

En el tutorial anterior escribimos un player bien simple utilizando la tecnología que la API de Soundcloud. En ese artículo enfrentamos el desafío utilizando la API de Javascript. Usamos el SDK de Javascript e implementamos una interfaz y las funcionalidades correspondientes en dos simples capítulos [Capítulo 1 y Capítulo 2].

La intefaz que utilizamos fue la siguiente:

Y la implementación resultó del siguiente modo:

Dentro de este contexto, se pudo concluir que la utilización de una API no necesariamente depende de un lenguaje complejo como PHP o Ruby, en este caso con HTML, CSS y Javascript podíamos hacer algo potente.

En el caso de Rdio, es lo mismo pero mucho más simple.

La API de Rdio

Para comenzar diremos que para utilizar la API de Rdio no existe una dependencia directa con la creación de una aplicación como sucede en Soundcloud. En este caso Rdio nos entrega un servicio llamado "Web Playback API" y solo necesita un Playback Token para funcionar.

¿Por qué es tan simple?

Porque lo que hace Rdio es utilizar la cuenta del usuario que esta escuchando, revisa en las cookies si el usuario está identificado y utiliza esas credenciales para reproducir la música. Por lo tanto, podríamos hacer un player en nuestro servidor y poder seguir escuchando en el sitio web de rdio, luego en la aplicación de escritorio y seguir en el mobile. ¡Está todo conectado!

Así que para partir tenemos que obtener un Playback Token, que es algo así como una credencial para un dominio en específico. Como estamos en un entorno de desarollo, asumiré que su dominio se encuentra en http://localhost. (Si no es este, deben conseguir su playback token según el dominio que están utilizando).

Para conseguir el Playback Token debemos ir a Rdio API Console (http://rdioconsole.appspot.com/#method=getPlaybackToken) y obtenerlo para el dominio correspondiente:

Presionamos el botón Make API Call y nos entregará algo como esto:

Si están registrados en Rdio, pueden hacer login y les entregará otro resultado. Lo importante, es que con este resultado vamos a utilizar nuestra API. En nuestro caso, el resultado completo fue el siguiente (JSON):

{
 "status": "ok", 
 "result": "GAlU2Akm_____2R2cHlzNHd5ZXg3Z2M0OXdoaDY3aHdrbmxvY2FsaG9zdORw4aQ-c-OoGBoLuySfL8Y="
}

Ahora que tenemos nuestro playback token iremos a lo más bonito, ¡programar!

La interfaz y estructura

Para comenzar nuestro reproductor reutilizaremos la interfaz, pero esta vez tendremos que usar los siguientes archivos:

  1. jQuery : <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  2. jQuery Rdio : https://raw.githubusercontent.com/rdio/jquery.rdio.js/master/jquery.rdio.min.js
  3. rdio.js : Archivo con la implementacion para Rdio
  4. rdio.html : Archivo de la estructura para el player de Rdio

Con estos tres archivos, reutilizaremos el código y css de nuestro reproductor anterior. Mientras que la estructura de archivos será algo como (mezclada con la anterior):

Lo que haremos en el archivo rdio.html será copiar y pegar lo de index.html pero reemplazaremos solo los archivos Javascript. El resultado debería verse del siguiente modo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="stylesheets/player.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="javascripts/jquery.rdio.min.js"></script>
    <script src="javascripts/rdio.js"></script>
    <title>Player Rdio</title>
</head>
<body>

    <div id="api"></div>
    <div id="player">
        <div id="player_artwork">
            <a href="javascript:void(0);">
                <img src="http://placehold.it/200x200" alt="artwork" />
            </a>
        </div>
        <div id="player_track">
            <div id="player_track_title">
                <a href=""></a>
            </div>
            <div id="player_track_artist">
                Player Bacán
            </div>
        </div>
        <div id="player_buttons">
            <ul>
                <li><a href="javascript:void(0);" id="player_prev"><span class="icon-to-start"></span></a></li>
                <li><a href="javascript:void(0);" id="player_play"><span class="icon-play"></span></a></li>
                <li><a href="javascript:void(0);" id="player_pause"><span class="icon-pause"></span></a></li>
                <li><a href="javascript:void(0);" id="player_next"><span class="icon-to-end"></span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Acá, la única diferencia que tiene con el otro código es que sobre el player agregamos <div id="api></div> y el botón de pausa. Este código es necesario para que nuestro plugin agregue un objeto flash y de ese modo reproducir la música. No es como en Soundcloud que se utiliza el HTML5 Sound, no señor, en este caso se utiliza swfobject para hacer "la magia".

El siguiente paso, entonces es hacer que la música se escuche. Para ésto, abriremos nuestro archivo rdio.js y comenzaremos por definir dos variables: playback_token y duration.

var playback_token = 'GAlU2Akm_____2R2cHlzNHd5ZXg3Z2M0OXdoaDY3aHdrbmxvY2FsaG9zdORw4aQ-c-OoGBoLuySfL8Y=';
var duration = 1;

En la variable playback_token vamos a escribir el token que obtuvimos anteriormente, mientras que duration comenzará en 1. Ya teniendo estas variables listas podemos comenzar a usar el plugin de jQuery.

Rdio Web Playback jQuery plugin

Para usar la API de Rdio con Javascript existe un plugin de jQuery que facilita todo. Esta la pueden encontrar en el siguiente link y lo que hace es utilizar el playback token y hacerlo funcionar usando swfobject, como dije anteriormente. Lo único que necesitamos es un placeholder, es decir, un div con un ID para poder acceder a la API. En nuestro casó es el div#api que creamos en la interfaz.

Comenzaremos por agregar abajo de nuestras variables antedichas el clásico $(document).ready(...) de jQuery.

var playback_token = 'GAlU2Akm_____2R2cHlzNHd5ZXg3Z2M0OXdoaDY3aHdrbmxvY2FsaG9zdORw4aQ-c-OoGBoLuySfL8Y=';
var duration = 1;

$(document).ready(function() {
    $('#api').rdio(playback_token);

Con este código, podremos hacer la conexión entre nuestro sitio y el web playback de Rdio. El siguiente paso es entender que la API de Rdio funciona de dos formas:

  1. Eventos : que son enviados por la API y deben ser recibidas por nuestro player
  2. API Calls : que son funciones ejecutadas por nuestro player y enviadas hacia la API

Para recibir y leer esos eventos se debe usar el método bind de jQuery el cual explicare más adelante, mientras que para enviar funciones a la API utilizaremos el método $('#...').rdio() para enviar las funciones.

Para comenzar a escuchar música debemos saber que Rdio es capaz de reproducir tanto tracks, como albumes y playlist. Y que cada uno de esos elementos pueden ser obtenidos desde la Rdio API Console. Para nuestro ejemplo usaremos el disco Everyday Robots de Damon Albarn, un disco que me gustó mucho. Para encontrar la key de ese disco buscaré usando el método search:

El resultado de la búsqueda fue el siguiente:

{
 "status": "ok", 
 "result": {
  "results": [
   {
    "baseIcon": "album/d/e/3/000000000042d3ed/4/square-200.jpg", 
    "releaseDate": "2014-04-29", 
    "artistUrl": "/artist/Damon_Albarn/", 
    "duration": 2794, 
    "isClean": false, 
    "shortUrl": "http://rd.io/x/Qj4AjK4/", 
    "canStream": true, 
    "embedUrl": "https://rd.io/e/Qj4AjK4/", 
    "type": "a", 
    "price": "None", 
    "key": "a4379629", 
    "icon": "http://rdio3img-a.akamaihd.net/album/d/e/3/000000000042d3ed/4/square-200.jpg", 
    "canSample": true, 
    "name": "Everyday Robots", 
    "isExplicit": false, 
    "artist": "Damon Albarn", 
    "url": "/artist/Damon_Albarn/album/Everyday_Robots_1/", 
    "artistKey": "r196899", 
    "length": 12, 
    "trackKeys": [
     "t47538897", 
     "t47538903", 
     "t47538911", 
     "t47538913", 
     "t47538921", 
     "t47538924", 
     "t47538929", 
     "t47538936", 
     "t47538941", 
     "t47538945", 
     "t47538947", 
     "t47538951"
    ], 

Acá podemos ver que el nombre del disco efectivamente es el que buscamos ("name": "Everyday Robots"), y que el key es "a4379629". Este key corresponde al album y por eso comienza con una a, mientras que los tracks comienzan con una t (ej: t47538897).

Por lo tanto, podriamos usar tanto el key del album como el de un track, y el player funcionaría de la misma forma. En nuestro ejemplo, usaremos el key del album (a4379629).

Para hacer que esto comience a sonar tendremos que agregar funcionalidad de nuestros botones de "play, next y prev", del siguiente modo:

    $('#player_play').click(function() {
        $('#api').rdio().play('a4379629');
    });

    $('#player_prev').click(function() {
        $('#api').rdio().previous();
    });

    $('#player_next').click(function() {
        $('#api').rdio().next();
    });

Acá estamos utilizando nuestra API del siguiente modo:

  • $('#api').rdio().play(ID) : para reproducir
  • $('#api').rdio().previous() : para el track anterior
  • $('#api').rdio().next() : para el siguiente track

Si presionan play en su reproductor deberían estar escuchando el primer track del disco llamado Everyday Robots. Si presionan next, debería cambiar el track y si presionan prev deberían volver a escuchar el track anterior.

De buenas a primeras el player estaría funcional, pero faltan algunos pequeños detalles.

Play/pause, Track info y Artwork.

Los pequeños detalles que harían la diferencia con nuestro player son los siguientes. Primero comenzaremos por obtener la información del track que estamos escuchando. Para esto usaremos el evento playingTrackChanged.rdio capturándolo con el método bind.

    $('#api').bind('playingTrackChanged.rdio', function(e, playingTrack, sourcePosition) {
        if (playingTrack) {
            duration = playingTrack.duration;
            $('#player_artwork a img').attr('src', playingTrack.icon);
            $('#player_track_title').text(playingTrack.name);
            $('#player_track_artist').text(playingTrack.artist);
        }
    });

Acá, al igual que en el player anterior, utilizaremos la información del track que está sonando. En este caso es muy simple porque cada vez que cambiamos el track o éste llega al final, se ejecuta el evento playingTrackChanged.rdio el cual nosotros capturamos a través del uso de bind.

El siguiente paso es hacer la diferencia entre el play y la pausa. Para esto agregaremos una variable al comienzo llamada first_play que por defecto estará en true. Además, tendremos que ocultar nuestro botón de pausa, agregarle la funcionalidad y luego capturar el evento playStateChanged.rdio para saber si se ha pausado o no el track.

var first_play = true;

Esto lo agregaremos abajo de la variable duration. Luego, dentro del "document ready" ocultaremos el botón pausa y le agregaremos la funcionalidad:

    $('#player_pause').hide();

    $('#player_pause').click(function(){
        $('#api').rdio().pause();
    });

Luego, capturaremos el método que indica si el track está pausado o no y ocultaremos y mostraremos los botones y de play y pausa según corresponda:

    $('#api').bind('playStateChanged.rdio', function(e, playState) {
        if (playState == 0) { // si es 0, está pausado
            $('#player_play').show();
            $('#player_pause').hide();
        } else {
            $('#player_play').hide();
            $('#player_pause').show();
        }
    });

Por último, haremos una modificación al botón play que utilizará el método play con el ID solo una vez.

    $('#player_play').click(function() {
        if (first_play) {
            $('#api').rdio().play('a4379629');
            first_play = false;
        } else {
            $('#api').rdio().play();
        }
    });

Acá, hacemos la verificación si es la primera vez que se presiona play para definir el album que queremos escuchar, en caso contrario, solo ejecutamos el método play para seguir escuchando lo que ya tenemos configurado.

El resultado de nuestro trabajo se ve así (press play). El código lo pueden descargar desde este link.

Espero que les haya gustado el tutorial, en mi caso fue una experiencia muy interesante y tan motivante que hice una variación pequeña utilizando una pequeña ayuda gráfica que encontré en codepen. El player que hice fue el siguiente y está hecho con mis 3 discos favoritos del 2014. Miren el resultado :

Cualquier comentario o consulta, escriban acá abajito!

Blog, Tutorial, Tutorial Javascript
9 minutos