Cómo personalizar el reproductor de audio de SoundCloud

El stream de audio existe en Internet desde 1990, y desde entonces tampoco hay muchas plataformas populares que lleven a cabo seste servicio. Sin duda alguna, una de las más populares es SoundCloud, que cuenta con ciertas ventajas distintivas sobre sus competidores, como por ejemplo el hecho de que es fácil de integrar.

Si bien el reproductor integrado es muy fácil de usar y es totalmente responsive (puedes ponerlo en un sidebar, en un post, en la portada...) puedes verte limitado en cuanto a la personalización del propio reproductor. De hecho, solo puedes cambiar el color y el tamaño antes de compartirlo o embeberlo. Si quieres insertar el reproductor en tu página web con un diseño completamente personalizado, échale un vistazo a ToneDen.

ToneDen es una librería de Javascript que te permite personalizar el reproductor de audio de SoundCloud. Puedes cambiar la skin, habilitar eventos de teclado o elegir mostrar el reproductor solo con una pista o con una lista de reproducción.

En este post te mostraremos cómo personalizar el reproductor de audio de SoundCloud.

Instalar el reproductor

Para personalizar el reproductor de SoundCloud, no necesitas copiar ningún script de inserción de la web de SoundCloud. Lo único que tienes que hacer es definir un elemento con un ID único y, después, edulcorarlo con un poco de Javascript.

Por ejemplo, quiero agregar uno de mis usuarios favoritos de SoundCloud, Regina Spektor, a mi sitio. Lo primero que voy a hacer es crear un div con un ID único, por ejemplo, player.

<div id="player"></div>

Luego agrego el siguiente código javascript antes de la etiqueta de cierre de body:

<script>
   (function() {
      var script = document.createElement('script');
 
      script.type = 'text/javascript';
      script.async = true;
      script.src = 'http://sd.toneden.io/production/toneden.loader.js'
 
      var entry = document.getElementsByTagName('script')[0];
      entry.parentNode.insertBefore(script, entry);
   }());
 
   ToneDenReady = window.ToneDenReady || [];
   ToneDenReady.push(function() {
      // This is where all the action happens:
      ToneDen.player.create({
         dom: '#player',
         urls: [
            'https://soundcloud.com/reginaspektor'
         ]
      });
   });
</script>

La primera función simplemente llama a la librería ToneDen. Más tarde, en la segunda función, se hace referencia a los recursos. Para mostrar el reproductor, recuerda poner en el parámetro dom el ID del reproductor que hemos definido antes, que si recuerdas, era “player”. Y, por último, para asignar una fuente de audio, solo necesito agregar la URL del usuario que deseo. Si lo que quieres son canciones sueltas, incluye las urls de audio tal que así:

urls: [
   'https://soundcloud.com/reginaspektor/samson',
   'https://soundcloud.com/reginaspektor/us',
   'https://soundcloud.com/reginaspektor/alltherowboats',
]

Personalizando el reproductor

Como he dicho antes, es posible personalizar el reproductor de SoundCloud si no te va mucho el que se ve por defecto mediante la librería ToneDen. Para ello, simplemente llama a la API relacionada en la segunda función. Puedes echar un vistazo a la documentación de la API para obtener más información.

El siguiente fragmento de código es una demostración del uso de la API para cambiar la skin del reproductor y así, cambiar su apariencia.

ToneDenReady = window.ToneDenReady || [];
ToneDenReady.push(function() {
   // This is where all the action happens:
   ToneDen.player.create({
      dom: '#player',
      urls: [
         'https://soundcloud.com/reginaspektor/samson',
         'https://soundcloud.com/reginaspektor/us',
         'https://soundcloud.com/reginaspektor/alltherowboats',
      ],
      single: true,
      skin: 'dark',
      visualizerType: 'bars'
   });
});

Si quieres tener varios reproductores en la página, crea más de forma sencilla mediante el método create, tal que así:

ToneDenReady.push(function() {
        ToneDen.player.create({
            dom: '#player1',
            urls: [
                'https://soundcloud.com/giraffage'
            ]
        });
        ToneDen.player.create({
            dom: '#player2',
            urls: [
                'https://soundcloud.com/teendaze'
            ]
        });
        ToneDen.player.create({
            dom: '#player3',
            urls: [
                'https://soundcloud.com/beat-culture'
            ]
        });
    });