Como hacer un reproductor usando SoundCloud #1

SoundCloud es una de las mejores plataformas de música que conozco, es por eso que hice este tutorial que les mostrará cómo podemos utilizar esta aplicación para poder hacer nuestro propio reproductor de música para un sitio web.

Para mi, la música en mi vida es tan importante como la programación. Siempre me han acompañado pero cuando se complementan me hacen mucho más feliz.

Desde que conocí Napster mi vida en Internet cambió. Despues vino Soulseek, los canales #mp3 de IRC hasta llegar a Bandcamp. Durante toda esa época intenté llevar los mp3 a sitios webs en formato de descarga o usando los conocidos Reproductores Macromedia Flash.

El interés nunca lo he perdido; pero como la tecnología ha avanzado, las implementaciones han mejorado bastante y las oportunidades han cambiado. Con la aparición de Grooveshark y la actualización de HTML a su versión 5 fue posible saber que existía una posibilidad de que los reproductores no fueran necesariamente flash, sino que fueran casi nativos y conectados con los sitios web. Sin embargo, Grooveshark no dejo de depender de flash.

Luego vino la actualización de Bandcamp que no hizo una innovación tecnológica, sino más bien, hicieron una innovación en modelo de negocio para apoyar a cualquier banda. (un gran tema que podemos ahondar en otro artículo).

Hasta que llegó el gran día en el que conocí a SoundCloud, una maravilla de aplicación.

La tecnología de SoundCloud

Como ustedes ya sabrán, SoundCloud es una plataforma que sirve principalmente para subir sonidos. Puede ser música, un podcast y hasta psicofonías, mientras sea un sonido que tengas en tu poder o que quieras grabar, es suficiente para ser parte de la comunidad. Esa es la gran diferencia con otras aplicaciones como Rdio o Spotify.

Lo bonito de SoundCloud no solo yace solamente en su interfaces limpias y acogedoras, sino que también en la forma en que han integrado tecnologías y en el cómo han desarrollado una API tan versátil y poderosa.

¿Se preguntaron alguna vez cómo era que SoundCloud sigue reproduciendo a pesar de que cambiamos las páginas? La respuesta es porque SoundCloud es una single-page app, fue escrita en Backbone.js y eso le dio el primer punto a favor para ser mi favorita.

Una single-page app es una aplicación web que funciona en una sola vista y que tiene por objetivo funcionar como una aplicación de escritorio.

El segundo punto a favor que tiene SoundCloud es que no utiliza Flash ya que para hacer las cosas más innovadoras utiliza SoundManager2, una librería capaz de reproducir sonidos usando la API HTML5 Audio.

Finalmente, el tercer y punto de K.O. que le dio a SoundCloud el trofeo a la mejor aplicación de música es que tiene una API Javascript y está completamente documentada!

¿Y por qué le doy tanto color con esta API? Porque con el SDK en JavaScript podremos hacer nuestro reproductor de sonidos. Así que si no tienen cuenta en SoundCloud, les recomiendo crearse una para comenzar con éste tutorial.

SoundCloud para desarrolladores

Antes de comenzar a desarrollar debemos registrar nuestra aplicación en el sitio que SoundCloud ha destinado para nosotros : SoundCloud Developers. Acá encontraremos toda la documentación necesaria para el desarrollo y un menú que nos permitirá registrar la app.

Cuando entramos a registrar nuestra app veremos la pantalla de inicio donde tendremos que ponerle nombre a nuestra app

Depués, debemos agregar una par de configuraciones. En Redirect URI yo escribí http://oauth.io que es una aplicación que nos permite centralizar los tokens de autentificación. Por lo pronto no usaremos esto pero lo podemos abordar en otro tutorial.

Acá, la configuración me entregó dos datos importantes que utilizaremos posteriormente:

  • Client ID
  • Client Secret

Con estos dos datos podremos programar lo que se nos ocurra.

Luego, si presionan Save App verán un mensaje que nos confirmará que la aplicación fue guardada. Si quisieramos ver nuestra lista de apps debemos ir a http://soundcloud.com/you/apps/

En esta lista podremos eliminar nuestra aplicación o volver a editarla por si queremos ver nuestros datos.

¡Listo! Ahora, nos ponemos el casco amarillo y nos dinspondremos a programar.

La estuctura previa

Para comenzar el desarrollo tenemos que tener un conocimiento básico de Javascript, ya que usaremos el SDK de Javascript.

La interfaz del reproductor de música va a usar íconos tipográficos, que los obtendremos desde fontello.com, desde acá seleccionaremos nuestros preferidos.

Luego que tenemos nuestros iconos seleccionados, bajamos el archivo y podemos comenzar a armar nuestra estructura.

La estructura de archivos debe considerar un archivo index.html, un directorio para estilos y otro para javascripts. Aquí, agregaremos un archivo player.css y otro llamado player.js.

Luego, debemos descomprimir el archivo de fontello y sacar desde el directorio css los archivos fontello.css y animation.css, así como también el directorio font, para que la estructura de nuestro proyecto quede del siguiente modo:

Ahora, para que nuestras tipografías funcionen debemos comenzar editando el archivo fontello.css y hacer referencia al directorio de forma relativa, es decir, de esto:

A esto:

Y con esta estructura, estamos listos para comenzar el desarrollo. Recuerden que el orden es primordial en el desarrollo.

La interfaz

Para la interfaz de nuestro reproductor usaré solamente 4 botones: play, pausa, prev y next. Además voy a mostrar el nombre del track y la imagen de la canción (artwork) en caso de que tenga una imagen. Mi intención es hacer algo como esto:

Entonces, para comenzar vamos por hacer una interfaz sin funcionalidad, solo usando HTML y CSS.

Para comenzar, debemos agregar nuestro player.css y nuestro player.js en el head.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="stylesheets/player.css">
    <script src="javascripts/player.js"></script>
    <title>Player SoundCloud</title>
</head>
<body>

¿Dónde agregamos fontello.css y animatio.css? En el player.css, que de pasada nos sirve para agregar la tipografía Roboto.

@import url('fontello.css');
@import url('animation.css');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

Continuando con el tag body, agregaremos un contenedor con el ID #player, un contenedor para la imagen y link, otro para la información de intérprete y track, y finalmente los 3 botones usando la clase icon-<name> de fontello.

<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="">Track Title</a>
        </div>
        <div id="player_track_artist">
            Artist
        </div>
    </div>
    <div id="player_buttons">
        <ul>
            <li><a href="" id="player_prev"><span class="icon-to-start"></span></a></li>
            <li><a href="" id="player_play"><span class="icon-play"></span></a></li>
            <li><a href="" id="player_next"><span class="icon-to-end"></span></a></li>
        </ul>
    </div>
</div>

Si se dan cuenta, acá usamos los íconos : icon-to-start, icon-play e icon-to-end, que son los que tendrán la funcionalidad de adelantar, retroceder y poner play y pausa.

De buenas a primeras, la interfaz se ve super mal, miren:

Por eso es que vamos a dejarlo bonito para seguir programando, usando estos estilos:

@import url('fontello.css');
@import url('animation.css');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);

body {
    background: #4A5964;
}

#player {
    width: 200px;
    margin: 0 auto;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
}

#player_track {
    font-family: "Roboto", "Helvetica", sans-serif;
    font-weight: 300;
}

Y el resultado debería ser este:

Con estos estilos, ya cumplimos con nuestra interfaz y ahora debemos pasar a la parte del desarrollo, utilizando el SDK de Javascript.

La funcionalidad

Para comenzar con la funcionalidad debemos acercarnos a la documentación de SoundCloud, en la sección Streaming Sounds. Acá se nos dan todas las directivas para poder hacer streaming directamente desde nuestro sitio, sin necesariamente hacer un "embed" de un reproductor por defecto.

Según la documentación el primer paso que debemos hacer es agregar el SDK (http://connect.soundcloud.com/sdk.js) a nuestro sitio. Nosotros lo agregaremos sobre el archivo player.js:

    <link rel="stylesheet" href="stylesheets/player.css">
    <script src="http://connect.soundcloud.com/sdk.js"></script>
    <script src="javascripts/player.js"></script>

Luego, comenzaremos a programar directamente en player.js. Así que abriremos player.js y agregaremos lo siguiente:

SC.initialize({
  client_id: 'Y27dbbae0099f348ca6dc481b2f9eddd7'
});

Acá estamos inicializando el SDK con el CLIENT_ID que obtuvimos al registrar nuestra aplicación. Al integrar el SDK podremos usar la variable SC que nos permitirá obtener información directa de SoundCloud a través de la API HTTP.

El siguiente paso entonces es preparar el set de sonidos que queremos que se escuchen en nuestro player. Esta parte es sumamente importante pues podemos obtener tracks de distintas formas:

Nuestra opción, y la que utilizaremos en nuestro ejemplo es usando una lista que me gusta mucho. Son 3 tracks de FDA, un grupo de rap chileno del sello PotocoDiscos.

Utilizando la consola HTTP de SoundCloud encontré el ID de la lista y con este el uso de éste ID podremos escuchar estos 3 tracks en nuestro player.

Así que lo primero que haremos será agregar a debajo de lo que ya hicimos, lo siguiente:

var player_tracks;

SC.get("/playlists/624667", { 
}, function(playlist) {
    player_tracks = playlist.tracks;
});

Primero que todo, definimos una variable global llamada player_tracks, esa variable nos servirá para poder tener todos los tracks y así escuchar o cambiarnos de track. Si todo funciona bien, podrán ver en consola algo como esto:

La consola cumple un papel importante cuando se programa en Javascript. Podemos obtener información de las variables que estamos definidas con solo escribir el nombre de esa variable y presionar enter.

El siguiente paso es hacer que al presionar play suene el primer track de nuestra lista, esto lo haremos utilizando jQuery, así que por lo tanto agregaremos la librería debajo del SDK usando el CDN.

    <link rel="stylesheet" href="stylesheets/player.css">
    <script src="http://connect.soundcloud.com/sdk.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="javascripts/player.js"></script>

Ahora que tenemos listo jQuery, crearemos nuestras funciones locales y asignaremos la funcionalidad al botón play.

"Poné" Play

Lo primero que haremos es crear una función llamada playSong, la cual tendrá la función de hacer sonar un track.

var player_tracks, player_sound;
...
...
var playSong = function(track) {    
    SC.stream("/tracks/" + track.id, function(sound) {
        player_sound = sound;
        player_sound.play();
        player_sound.setVolume(50);
        player_sound.on
    });
};

Esta función definida en una variable tiene la única función de ir a buscar el track usando la API, y al momento de encontrarla, ejecutar el método play. En este método, necesitaremos definir globalmente la variable player_sound donde anteriormente teníamos la variable player_tracks. Esto nos servirá en otro momento para verificar la posición del track.

El siguiente paso es definir dos variables claves en nuestra aplicación, la primera es player_current_track y la segunda es player_current_track_index. Ambas variables nos permitirán saber cuál es el track que se está tocando y en qué posición de la lista de tracks está, respectivamente. Por lo tanto, agregaremos estas variables de forma global donde anteriormente habíamos definido las otras.

var player_tracks, player_sound, player_current_track;
var player_current_track_index = 0;

En esta caso, el index parte en 0, que corresponde a la primera canción de la lista. Teniendo estas variables definidas podremos hacer sonar nuestros tracks del siguiente modo:

$(document).ready(function(){
    $('#player_play').click(function(){
        if (typeof(player_current_track) == 'undefined') {
            player_current_track = player_tracks[player_current_track_index];
        }

        if (typeof(player_sound) == 'undefined') {
            playSong(player_current_track);

            $('#player_track_title a').html(player_current_track.title);
            $('#player_track_artist').html(player_current_track.user.username);
            $('#player_artwork a img').attr('src', player_current_track.artwork_url);
        }
    });
});

Utilizando el document ready de jQuery declaramos la función para el botón play. En esta función preguntamos si el track está definido, en caso de que no lo esté lo definimos usando el index (que por defecto es 0). Luego, si el player_sound está definido, podemos ejecutar la función playSong del track indicado.

Después, debajo del playSong, usamos jQuery para poder completar los datos del reproductor y agregar el titulo, el autor y la imagen de la canción.

¿Quieren ver el resultado? Pues hagan click aquí : Player bacán y si lo quieren descargar hagan click acá.

En la segunda parte del tutorial vamos a implementar las siguientes funciones del reproductor para adelantar, retroceder, pausar y reanudar.

Espero que les haya gustado, si tienen consultas ¡acá abajo tienen un espacio!

Blog, Tips, Tips Javascript
8 minutos