2

次のコードを使用して、soundcloud ウィジェットを埋め込みます。

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

SC.Widget.Events.Ready をバインドするにはどうすればよいですか? 埋め込み iframe の ID またはクラスを設定して選択できるようにする方法がわかりません。また、次の機能不全のコードのように、バインドできるようにロードされた時期もわかりません。

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

ありがとう！

4

1 に答える 1

4

SoundCloud JavaScript SDK を使用している理由が、SC.oembedSoundCloud のパーマリンクしかないときに埋め込み HTML を取得できるようにするためである場合は、おそらくそうすべきではありません。/resolve 代わりに、または/oembedエンドポイントと対話できます。

違いは、リクエストで/oembedエンドポイントを指定する必要がないことですclient_id 。まずこのアプローチから始めましょう。

オプション1

jQuery を使用しますが、アイデアは明確です。

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

オプション 2

他にできることは、/resolveエンドポイントを使用することですが、エンドポイントと対話するために指定client_idする必要があります。また、Widget iframe HTML を自分で作成する必要があります (これはそれほど悪くはありません)。

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

JavaScript コードの例を読みやすくするために、JSBin のHTMLまたは出力ペインを無効にできることに注意してください。

于 2013-02-03T19:29:13.240 に答える