Tag Archives: javascript

Matas Announcing the SoundCloud Widget Javascript API

A lot of developers asked for it and now you can has it: programming level access to the SoundCloud Widget Player.

Via the new Widget API you can access functions like play and pause, show additional info about the currently playing track on your page or even hide our widget and create your own JavaScript based interface for it.

Check out this demo and some code examples. It only takes a few lines like:

soundcloud.addEventListener('onPlayerReady', function(player, data) {
  console.log("widget ready, let's play");
  player.api_play();
});

The Widget API also integrates nicely with the popular JavaScript frameworks jQuery and Prototype.

The source code is available at github together with the documentation.

We’re curious to hear what you think so please post feedback and feature requests in our Google group. You are also welcome to contribute to the project if you think there’s something missing.

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.