Fully customizable, responsive, and extensible.

Basic usage:

Add the following snippet of code to your page (before the closing body tag).

<script>
        (function() {
            var script = document.createElement('script');

            script.type = 'text/javascript';
            script.async = true;
            script.src = '//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/giraffage'
                ]
            });
        });
</script>

Player Configuration:

There are several configuration options that you can explore. However dom and urls must be specified.

  • dom: The container in which you want your player to render in.
  • urls: Urls to SoundCloud artist, tracks, or set. Parameter can take an array of multiple urls.

Check out the documentation for a full list of the config parameters and defaults.

Single Track Players:

If you want to feature a single track instead of a playlist, the player will automatically default to the single player below if a single track url is provided.

You can also set tracksPerArtist: 1 to force a single track to play for an artist url.

Example:


 ToneDen.player.create({
    dom: '#player',
    urls: [
        'https://soundcloud.com/saintpepsi/unhappy'
    ]
});
                    

Demo:

Multiple Players:

You can create as many players as you like by pushing multiple ToneDen.player objects to ToneDenReady.

Example:


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

Create your own custom player without the codez

At ToneDen, we make it easy to show off your music. Make a free player for your tunes by syncing your SoundCloud.