Introducing Javascript-based SoundCloud players

Introducing Javascript-based SoundCloud players

We’ve seen a lot of sites and projects using the SoundCloud API in the last few weeks, and of course we’re super-excited about this! One thing we’ve noticed is that a few of these projects have used Javascript-based players to play back the audio. Check for example the slick and minimalistic player on electronica label Pluxemburg’s new site, or the player on the innovative crowd-sourced site Listen to Blogs. They both use their own Javascript-based players powered by the SoundCloud API. This is a nice technique (that we’re also using ourselves on soundcloud.com) since it gives you full control over the look’n’feel and also enables tight integration with the rest of the site.

Realising that using Javascript to build music players for your SoundCloud-powered sites is becoming increasingly popular, we decided to share some of our knowledge in this area. So without further ado we’d like to announce the open-source SoundCloud Javascript-based player! It’s a simple, extensible, great-looking player based on SoundManager 2 and jQuery. It takes the shape of a customizable jQuery plugin, that let’s you create a player with one line of javascript, for any link to a SoundCloud-track on your page. Simply put this in your HTML:

<a class="soundcloud-player" href="http://soundcloud.com/forss/flickermood">Play</a>

And put this in your javascript:

$("a.soundcloud-player").scPlayer();

And voilà, you have a player on your page!
Check it out and view live examples here.

We use cookies for various purposes including analytics and personalized marketing. By continuing to use the service, you agree to our use of cookies as described in the Cookie Policy.

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close