Audio streaming had been round at the Web since 1990 and there aren’t a large number of fashionable audio streaming platforms to choose between now. Some of the fashionable is SoundCloud which has some distinct benefits over its competition together with being simple to embed.

Whilst the embedded participant may be very consumer pleasant and responsive — you’ll be able to put it at the sidebar, on a publish or a homepage – you’ll be able to restricted relating to customizing the player. You’ll be able to best alternate the colour and measurement earlier than sharing or embedding it. If you wish to put the participant to your internet web page with complete new design, then chances are you’ll like ToneDen.

ToneDen is a javascript library construct for customizing SoundCloud audio participant. The participant is responsive, customizable and extensible. You’ll be able to alternate the outside, allow the keyboard tournament or select to show the participant with a unmarried monitor best or complete with playlist. On this publish, I can information you to the elemental set up and optimization. Let’s get began!

1. Putting in the participant

To get custom designed SoundCloud participant, you don’t want any embedded script from SoundCloud web site. All you need to do is solely outline a component with distinctive identification then upload the desired script.

As an example, I need to upload considered one of my favourite customers from SoundCloud, Regina Spektor, to my web site. The very first thing that I’m going to do is create a div with distinctive identification, say participant, like so.

Then I upload the next required javascript earlier than the final tag of frame:


The primary serve as is principally to name javascript library of ToneDen. Simply depart the entirety as it’s, and if you wish to host the supply by yourself server, get it here.

In the second one serve as, that is the place you must reference all sources. To show the participant, give the dom the similar identification as we outline earlier than. And to name the audio supply, I simply want to upload the urls with the consumer url that I would like. If you want best decided on audio tracks, then come with 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 were given my stunning SoundCloud participant:

play demoplay demo

2. Customizing the participant

As discussed, you’ll be able to customise the ToneDen participant in the event you don’t just like the default possibility. To customise it, simply come with the similar API in the second one serve as. Head over to the API documentation web page for extra element.

The next snippet is a demo of the usage of easy API like pores and skin to modify the participant colour, unmarried for converting the UI appears to be minimalistic and visualizerType to turn a unique form of visualization.

ToneDenReady = window.ToneDenReady || [];
ToneDenReady.push(serve as() {
   // That is the place all of the motion occurs:
   ToneDen.participant.create({
      dom: '#participant',
      urls: [
         'https://soundcloud.com/reginaspektor/samson',
         'https://soundcloud.com/reginaspektor/us',
         'https://soundcloud.com/reginaspektor/alltherowboats',
      ],
      unmarried: true,
      pores and skin: 'darkish',
      visualizerType: 'bars'
   });
});

Our participant now must appear to be this:

minimalistic playerminimalistic player

If you wish to have more than one avid gamers at the web page, simply create some extra ToneDen.participant.create like so:

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

Ultimate Concept

With only a few further code, now you’ll be able to create your personal model of the SoundCloud participant. The factor I really like maximum from this library is its minimalistic design and simple customization. You’ll be able to additionally combine this participant for your WordPress weblog with some simple instructional within the backside of ToneDen page. Have amusing!

The publish How to Customize SoundCloud Audio Player gave the impression first on Hongkiat.

WordPress Website Development

[ continue ]