Backstage Blog

• Announcements

I’ve worked at SoundCloud for over two years now, and if there’s one thing I do a lot, it’s color waveforms. Tons of them. And, I’ve done it several different ways. Today, Johannes and I are pumped to announce a new JavaScript library called Waveform.js that will assist you in your coloring efforts. But first, let’s take some time to look back and learn from past techniques.

• Announcements

Smashing Pumpkins are using a BETA of the next version of Premiere to debut their new record “Oceania.” Here’s what’s new about the app.

• JavaScript

This article is also available in:

• Serbo-Croatian: Pravljenje novog SoundCloud
• Armenian: SoundCloud (ձայնամպ) ծրագրավորողների համար

The front-end team at SoundCloud has been building upon our experiences with the HTML5 widget to make the recently-released Next SoundCloud beta as solid as possible. Part of any learning also includes sharing your experiences, so here we outline the front-end architecture of the new site.

Building a single-page application

One of the core features of Next SoundCloud is continuous playback, which allows users to start listening to a sound and continue exploring without ever breaking the experience. Since this really encourages lots of navigation around the site, we also wanted to make that as fast and smooth as possible. These two factors were enough in themselves for us to decide to build Next as a single-page Javascript application. Data is drawn from our public API…

• Events

On Saturday, I joined over a hundred other hackers at HackTO. This has become a regular event in the Toronto tech scene, thanks to excellent organizing by Leila Boujnane and Corey Reid. SoundCloud joined several other API providers, including Atomic Reach, Context.IO, FreshBooks, Shopify, TinEye, Twilio, Trendspottr, WordPress and YellowAPI.

The idea behind the event is simple: find a team (or go solo) and build an app using one or more of the APIs presented by sponsors. All apps have to be demoable by 5pm at which time you pitch to the judges who select the 1st, 2nd and 3rd place winners.

• Announcements
• Hacks

In the last weeks we got pretty excited about the idea of using timed comments to create and script rich media experiences. Imagine being able to trigger all kinds of visualizations & interactions for a timed comment while playing a track.

• Announcements

Last week we announced a new integration with Ableton Live 8, that lets you easily share your sounds from within Ableton Live to SoundCloud. Today we’re making the technology behind that integration available to everyone through our new Desktop Sharing Kits.

• Announcements

One of the SoundCloud API’s most powerful features is the timed comment. At its core it seems simple enough: a piece of text associated with a point in time for a particular track. But where you see timed opinions, I see a light-weight game scripting engine.

So when Johannes Wagener told me he was adding an ontimedcomments event to our JS SDK, I immediately began work on Wave Raid: Quest for the Timed Comment.

• Announcements

SoundCloud is teaming up with Acapela Group for our first Developer Contest. Acapela Group offers amazing text to speech solutions and have a variety of SDKs so you can write apps that create sound files using one of their voices (including hip-hop and country!). Take a listen to some sample voices.

We’re calling on our developer community to mashup SoundCloud and Acapela. Show us what you can do using a text to speech service with the best audio content platform on the web. Maybe you want to have your email read (or sung!) to you layered on some instrumental or drum tracks. We think there are loads of options for making interesting and accessible apps using these two services.

• Announcements

Today we’re officially announcing our JavaScript API for the new HTML5 SoundCloud Widget. To use it, just insert the script tag on a page where you’re using our HTML5 Widget.

<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>

What does it permit?

Access and control the properties of HTML5 Widget

<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/1539950/favorites" width="100%" height="465" scrolling="no" frameborder="no"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
  (function(){
    var widgetIframe = document.getElementById('sc-widget'),
        widget       = SC.Widget(widgetIframe);

    widget.bind(SC.Widget.Events.READY, function() {
      widget.bind(SC.Widget.Events.PLAY, function() {
        // get information about currently playing sound
        widget.getCurrentSound(function(currentSound) {
          console.log('sound ' + currentSound.get('') + 'began to play');
        });
      });
      // get current level of volume
      widget.getVolume(function(volume) {
        console.log('current volume value is ' + volume);
      });
      // set new volume level
      widget.setVolume(50);
      // get the value of the current position
    });

  }());
</script>

Load widgets

<iframe id="sc-widget" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&show_artwork=true"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
  (function(){
    var widgetIframe = document.getElementById('sc-widget'),
        widget       = SC.Widget(widgetIframe),
        newSoundUrl = 'https://api.soundcloud.com/tracks/13692671';

    widget.bind(SC.Widget.Events.READY, function() {
      // load new widget
      widget.bind(SC.Widget.Events.FINISH, function() {
        widget.load(newSoundUrl, {
          show_artwork: false
        });
      });
    });

  }());
</script>

Resources

• take a look at our documentation for more details and technical descriptions
• check out our playground to get an overview of functionalities provided by the API

Feedback

If you’ve got a suggestion, found a bug, please let us…

• Hacks

Over 3 months ago we started the “Hacker Time” initiative (see here) and now it is time for a recap what’s happened so far. From the outset, people outside of the engineering department were very forthcoming in suggesting ideas for Hacker Time projects. While it was great to see so much interest, the essence of Hacker Time is that engineers create the projects that they’re personally motivated to develop. (It’s absolutely key to keep things separate from the general backlog!). Once that clicked…