Fully customizable, responsive, and extensible.
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>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.
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:
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"
]
});
});We've built a shortcode plugin for you to easily embed the player into your Wordpress blogs. You can download it here.
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.
codez