Bind() 到动态嵌入的 souncloud 小部件

问题描述：

我正在使用以下代码嵌入 soundcloud 小部件:

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

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

如何将 SC.Widget.Events.Ready 绑定到它?我看不到任何设置嵌入 iframe 的 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());

谢谢！

答

如果您使用 SoundCloud JavaScript SDK 的原因是为了能够到 SC.oembed 以在只有 SoundCloud 永久链接时嵌入 HTML，那么你可能不应该.您可以与 /resolve 进行交互或 /oembed 端点.

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.

区别在于 /oembed 端点不需要 client_id要在请求中指定，所以让我们先从这种方法开始.

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

我将使用 jQuery，但思路应该很清楚:

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');
    });
  });

此代码已发布并已评论 – http://jsbin.com/ilesum/2/edit

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

您可以做的另一件事是使用 /resolve 端点，但您必须指定 client_id 才能与之交互，此外您还需要构造 Widgetiframe HTML 自己(虽然还不错):

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');
  });
});

还有例子 http://jsbin.com/oqebuk/2/edit

请注意，您可以在 JSBin 上禁用 HTML 或输出窗格，以便更轻松地阅读示例 JavaScript 代码.

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

Bind() 到动态嵌入的 souncloud 小部件

相关推荐