85 |
Fully customizable, responsive, and extensible.
86 |
87 |
Basic usage:
88 |
Add the following snippet of code to your page (before the closing body tag).
89 |
<script>
90 | (function() {
91 | var script = document.createElement('script');
92 |
93 | script.type = 'text/javascript';
94 | script.async = true;
95 | script.src = '//sd.toneden.io/production/toneden.loader.js'
96 |
97 | var entry = document.getElementsByTagName('script')[0];
98 | entry.parentNode.insertBefore(script, entry);
99 | }());
100 |
101 | ToneDenReady = window.ToneDenReady || [];
102 | ToneDenReady.push(function() {
103 | // This is where all the action happens:
104 | ToneDen.player.create({
105 | dom: '#player',
106 | urls: [
107 | 'https://soundcloud.com/giraffage'
108 | ]
109 | });
110 | });
111 | </script>
112 |
113 |
114 |
115 |
116 |
Player Configuration:
117 |
There are several configuration options that you can explore. However dom and urls must be specified.
118 |
119 | 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.
122 |
Check out the documentation for a full list of the config parameters and defaults.
123 |
124 |
125 |
Single Track Players:
126 |
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.
127 |
You can also set tracksPerArtist: 1 to force a single track to play for an artist url.
128 |
Example:
129 |
130 | ToneDen.player.create({
131 | dom: '#player',
132 | urls: [
133 | 'https://soundcloud.com/saintpepsi/unhappy'
134 | ]
135 | });
136 |
137 |
Demo:
138 |
139 |
140 |
141 |
Multiple Players:
142 |
You can create as many players as you like by pushing multiple ToneDen.player objects to ToneDenReady.
143 |
Example:
144 |
145 | ToneDenReady.push(function() {
146 | ToneDen.player.create({
147 | dom: '#player1',
148 | urls: [
149 | 'https://soundcloud.com/giraffage'
150 | ]
151 | });
152 | ToneDen.player.create({
153 | dom: '#player2',
154 | urls: [
155 | 'https://soundcloud.com/teendaze'
156 | ]
157 | });
158 | ToneDen.player.create({
159 | dom: '#player3',
160 | urls: [
161 | 'https://soundcloud.com/beat-culture'
162 | ]
163 | });
164 | });
165 |
166 |
167 |
)
17 |