Bind() to a dynamically embedded souncloud widget

醉酒当歌 提交于 2019-12-22 15:03:10

问题


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!


回答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.



来源:https://stackoverflow.com/questions/14637770/bind-to-a-dynamically-embedded-souncloud-widget

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!