Question

I am using the following code to embed a soundcloud widget:

SC.oEmbed(soundcloud_url, {color: "3C9FCE"},  document.getElementById('container_id'));

How do I bind a SC.Widget.Events.Ready to it? I don’t see any way to set the id or class of the embed iframe so that I can select it. Nor do I know when it has been loaded so that I can bind it, such as the following dysfunctional code:

var frame = document.getElementById('container_id').getElementsByTag("iframe")[0];
frame.bind(SC.Widget.Events.Ready, listnerFucnt());

Thanks!

Answer 1

If the reason you are using SoundCloud JavaScript SDK is to be able
to SC.oembed to get embed HTML when having only SoundCloud permalink,
then you probably shouldn’t. You can interact with either /resolve
or /oembed endpoints instead.

The difference is that /oembed endpoint doesn’t require client_id
to be specified in request, so let’s start with this approach first.

Option 1

I’ll use jQuery, but the idea should be clear:

var SOUNDCLOUD_URL = 'http://soundcloud.com/georgconrad/shostakovich2',
    WIDGET_OPTIONS = '&color=3C9FCE&liking=false';

jQuery
  .getJSON( 
    'http://soundcloud.com/oembed.json?url=' + SOUNDCLOUD_URL + WIDGET_OPTIONS 
  )
  .done( function ( data ) {
    var widget;
    $('body').html( data.html );
    widget = SC.Widget($('body').find('iframe')[0]);
    widget.bind('ready', function () {
      alert('widget ready');
    });
  });

This code live and commented – http://jsbin.com/ilesum/2/edit

Option 2

The other thing you could do is to use /resolve endpoint, but you have to specify client_id in order to interact with it, plus you will need to construct Widget iframe HTML yourself (which isn’t too bad though):

var SOUNDCLOUD_URL = 'http://soundcloud.com/georgconrad/shostakovich2',
    CLIENT_ID = 'YOUR_CLIENT_ID',
    TEMPLATE = '<iframe width="100%" height="166" scrolling="no" ' +
               'frameborder="no" src="http://w.soundcloud.com/player/?url={url}{options}" '+ 
               'class="sc-widget"></iframe>';

$.getJSON(
  'http://api.soundcloud.com/resolve.json?url=' + SOUNDCLOUD_URL + 
  '&client_id=' + CLIENT_ID
).done(function ( soundData ) {
  // I am using String.prototype.supplant from Crockford
  // (if you follow example code link you'll see what I mean)
  $('body').html(TEMPLATE.supplant({
    url: soundData.uri,
    options: '&color=3C9FCE'
  }));
  widget = SC.Widget($('body').find('iframe')[0]);
  widget.bind('ready', function () {
    alert('widget ready');
  });
});

And example live as well http://jsbin.com/oqebuk/2/edit

Please note you can disable HTML or Output panes on JSBin, so it’s easier to read the example JavaScript code.