How to customize the SoundCloud audio player

Stream audio has appeared on the Internet since 1990 and currently does not have many popular audio streaming platforms to choose from. One of the most popular options is SoundCloud. SoundCloud has a number of distinct advantages compared to competitors, including easily embedding the player.

Although the embedded player is very friendly and responsive - you can put it on the sidebar, on the post or home page - but there are limitations when customizing the player. You can only change the color and size before sharing or embedding it. If you want to bring the player to your site with a completely new design, you might like ToneDen.

ToneDen is a JavaScript library build to customize the SoundCloud audio player. It is responsive, customizable and expandable. You can change the interface, activate keyboard event (the event when you press a button on the keyboard), choose to display the player with a single track or with the full playlist. In this article, TipsMake.com will guide you to install and optimize the SoundCloud audio player. Let's start now!

1. Install the player

To get a custom SoundCloud player, you don't need any embedded scripts from the SoundCloud page. All you have to do is define an element with a unique ID then add the required script.

For example, you want to add one of your favorite users from SoundCloud, Regina Spektor, to your website. The first thing you will do is create a div with a unique ID, say 'player' for example.

Then, add the following necessary Javascript to the closing tag of the body:

The first function is basically calling the 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.

The second function is where you should refer to all the resources. To display the player, give dom the same ID as you defined earlier. And to call the audio source, you just need to add urls with the user URL you want. If you only need audio tracks to be selected, include such audio URLs:

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

Everything is complete! Now you have your beautiful SoundClound player.

How to customize the SoundCloud audio player Picture 1

2. Customize 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. Check out the API documentation page at https://github.com/ToneDen/Player#api for more details.

The following snippet is a demo for using a simple, skin- like API to change the player and single colors to change the user interface so that it looks minimalist and visualizerType to display a different kind 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' }); }); 

Your player will now look like this:

How to customize the SoundCloud audio player Picture 2

If you want more players on the page, it's easy to create some more such ToneDen.player.create :

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

With just some additional code, you can now create your own version of SoundCloud player. What most users like from this library is its minimalist design and easy customization. You can also integrate this player into your WordPress blog with some easy instructions at the bottom of ToneDen. Reference links:

 https://www.toneden.io/player 

Hope you are succesful.