Web Development

ToneDen SDK – Pure JS Customizable Audio Player For SoundCloud

Maan
Aug 10, 2014
2 min read
212 words

The ToneDen SDK loader script (toneden.loader.js) contains the requirejs source code, and uses requirejs to asynchronously load the SDK script (toneden.js) from the ToneDen CDN.

This system allows embedding pages to include (either asynchronously or synchronously) the relatively small loading script, which then loads the much larger SDK files in a non-blocking way. When the SDK has been loaded, the loader calls all the functions in the global ToneDenReady array, allowing developers to access the functionality of the SDK. (Inspired by/copied from the Shootitlive folks, who are way smarter than me!)

The ToneDen SDK/ directory contains all the good stuff. The file toneden.js is the hub of the action. It loads all the functions of the SDK (currently only the player) as dependencies, and returns them so that they can be attached to the global ToneDen object. The other important function of toneden.js is to grab the CSS that has been minified and concatenated by Grunt and insert it into the page as a <style> element.

Skins

ToneDen SDK player for Soundcloud ToneDen SDK player skins

[button style=”1″ caption=”Demo” link=”https://www.toneden.io/player”][/button]     [button style=”4″ caption=”Download For Web” link=”https://github.com/ToneDen/toneden-sdkr”][/button]     [button style=”3″ caption=”Download for WordPress” link=”http://wordpress.org/plugins/toneden-player-shortcode/”][/button]

Maan

Author

Maan is a Lead Frontend Engineer and Creative Director with 10+ years of industry experience blending UI/UX design with React-based development. A multifaceted practitioner, he has spent a decade turning abstract inspiration into deployed, scalable reality. Maan’s expertise lies in high-fidelity prototyping and component architecture, which he shares through insightful technical writing with the next generation of developers. His unique approach ensures that pixels not only meet passion but also rigorous performance standards.

View all posts

Continue reading

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *

Menu