Eric 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.

  • http://lensco.be lensco

    Really neat, lads. Keep on pushing things!

  • http://lensco.be lensco

    Really neat, lads. Keep on pushing things!

  • http://nitzan.co.uk Nitzan

    Solid. Any support anywhere for it?

  • http://nitzan.co.uk Nitzan

    Solid. Any support anywhere for it?

  • http://soundcloud.com/ Eric Wahlforss

    how do you mean “support”? we are here :)

  • http://soundcloud.com/ Eric Wahlforss

    how do you mean “support”? we are here :)

  • beatsession

    hi,

    You guys have these tiny players on soundcloud, in the “more tracks by” section, on the profile page.
    How can I use that tiny player on my own website. The regular Soundcloud player cant be made that small…

    Thank you.

  • http://david-noel.com David Noël

    This player is not available for embedding, you can get a small mini player
    with any Premium account:

    http://soundcloud.com/tour/widgets

  • http://www.prada-outlet-store.com prada

    Here elaborates the matter not only extensively but also detailly .I support the
    write's unique point.It is useful and benefit to your daily life.You can go those
    sits to know more relate things.They are strongly recommended by friends.Personally
    I feel quite well.. http://www.prada-outlet-store.com