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