bind（）将动态嵌入式souncloud部件 [英] Bind() to a dynamically embedded souncloud widget

问题描述

我用下面的code嵌入的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或类，这样我可以选择它。我也不知道什么时候已经被加载，这样我可以绑定，如下面的功能失调code：

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());

谢谢！

推荐答案

如果您正在使用的JavaScript的SoundCloud SDK的原因是为了能
到 SC.oembed 仅有的SoundCloud永久时候能得到嵌入HTML，
那么你可能不应该。您可与互动/决心
或 /透过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');
    });
  });

这code生活和注释 - http://jsbin.com/ilesum/2/edit

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

您可以做的另一件事是使用 /决心端点，但你必须指定的client_id 为了与它交互，再加上你将需要构建的Widget IFRAME 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

请注意，您可以禁用的 HTML 或输出在JSBin窗格，所以它更容易阅读的例子的JavaScript code。

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

这篇关于bind（）将动态嵌入式souncloud部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！