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/v2/toneden.loader.js";

        var entry = document.getElementsByTagName("script")[0];
        entry.parentNode.insertBefore(script, entry);
    }());

    ToneDenReady = window.ToneDenReady || [];
    ToneDenReady.push(function() {
        // Modify the dom and urls parameters to position
        // your player and select tracks/sets/artists to play.
        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 selector (to be passed to jQuery) for the container you want your player to render in.
  • urls: Array of urls to SoundCloud artists, tracks, or sets.

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

Single-Track Players:

The player will automatically default to the single-track player below if only one track url is provided.

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

Example:

ToneDen.player.create({
    dom: "#player",
    urls: [
        "https://soundcloud.com/flume/sintra"
    ]
});

Demo:

Multiple Players:

You can create as many players as you like by calling ToneDen.player.create(parameters) multiple times in the ToneDenReady callback.

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

WordPress Integration:

We've built a shortcode plugin for you to easily embed the player into your Wordpress blogs. You can download it here.

Adobe Muse Integration:

John Ramos from museforyoushop.com has written a free Adobe Muse plugin using the ToneDen player. Get it here!

You can access all of the documentation and source code here.

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.