Embeddable SoundCloud Players

The proof of concept in building of component-based, high-quality embeddable widgets. Under the hood Soundplayer Widget consists of deku.js for components and soundcloud-audio.js for HTML5 Audio API.

Demo

Manual Setup

I. Register for an app and get SoundCloud API clientId at https://developers.soundcloud.com.

II. Include the script into your html page:

<script>
/* * * CONFIGURATION VARIABLES * * */
var sb_soundplayer_client_id = 'YOUR_CLIENT_ID';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function(d, s, id) {
    if (d.getElementById(id)) return;
    var fjs = d.getElementsByTagName(s)[0],
        js = fjs.parentNode.insertBefore(d.createElement(s), fjs);
    js.id = id;
    js.src = '//cdnjs.cloudflare.com/ajax/libs/soundplayer-widget/0.4.2/soundplayer-widget.min.js';
})(document, 'script', 'sb-soundplayer-widget-sdk');
</script>

III. Insert widget into the place where you want it to be shown on the page with necessary SoundCloud track or playlist link in data-url:

<div data-url="https://soundcloud.com/shura/shura-indecision-12-edit-1" class="sb-soundplayer-widget"></div>

IV. Enjoy! 😎 🎆 💃

Soundplayer Widget is also available on npm:

npm install soundplayer-widget --save

Browser support

Dependency on Deku which (due to its' tiny size) doesn't support legacy browsers. It means that SoundPlayer has the same range of supported browsers:

Chrome	Firefox	IE/Edge	Safari
39+ ✔	34+ ✔	10+ ✔	7+ ✔

---

MIT Licensed