How to Customize SoundCloud Audio Player

By . in Coding. Updated on .

Audio streaming have been around on the Internet since 1990 and there are not numerous popular audio streaming platforms to choose from now. One of the most popular is SoundCloud which has some distinct advantages over its competitors including being easy to embed.

While the embedded player is very user friendly and responsive — you can put it on the sidebar, on a post or a homepage – you can limited when it comes to customizing the player. You can only change the color and size before sharing or embedding it. If you want to put the player in your web page with whole new design, then you may like ToneDen.

ToneDen is a javascript library build for customizing SoundCloud audio player. The player is responsive, customizable and extensible. You can change the skin, enable the keyboard event or choose to display the player with a single track only or full with playlist. In this post, I will guide you to the basic installation and optimization. Let’s get started!

Recommended Reading: How To Create A Sleek Web Audio Player

1. Installing the player

To get customized SoundCloud player, you don’t need any embedded script from SoundCloud site. All you have to do is just define an element with unique id then add the required script.

For example, I want to add one of my favorite users from SoundCloud, Regina Spektor, to my site. The first thing that I’m going to do is create a div with unique id, say player, like so.

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

Then I add the following required javascript before the closing tag of 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>

The first function is basically to call javascript library of ToneDen. Just leave everything as it is, and if you want to host the source on your own server, get it here.

In the second function, this is where you should reference all resources. To display the player, give the dom the same id as we define before. And to call the audio source, I just need to add the urls with the user url that I want. If you need only selected audio tracks, then include the audio urls like so:

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

That’s it! Now I got my beautiful SoundCloud player:

play demo

2. Customizing the player

As mentioned, you can customize the ToneDen player if you don’t like the default option. To customize it, just include the related API in the second function. Head over to the API documentation page for more detail.

The following snippet is a demo of using simple API like skin to change the player color, single for changing the UI looks to be minimalistic and visualizerType to show a different type of visualization.

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'
   });
});

Our player now should look like this:

minimalistic player

If you want to have multiple players on the page, easily create some more ToneDen.player.create like so:

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'
            ]
        });
    });

Final Thought

With just some additional code, now you can create your own version of the SoundCloud player. The thing I like most from this library is its minimalistic design and easy customization. You can also integrate this player to your WordPress blog with some easy tutorial in the bottom of ToneDen page. Have fun!

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail