Javascript 向SoundCloud小部件发布绑定事件

Javascript 向SoundCloud小部件发布绑定事件,javascript,html,widget,soundcloud,audio-player,Javascript,Html,Widget,Soundcloud,Audio Player,我正在将finish事件绑定到小部件,它对第一个小部件工作良好,但对同一页面上的第二个小部件不起作用 未捕获的TypeError:无法读取null的属性“postMessage” 这就是我初始化它的方式 var widget = SC.Widget($instance[0]); widget.bind(SC.Widget.Events.FINISH, function(){ options.done(); }); 用例是一次显示一个轨迹。第一个完成后,第二个加载。因为这个例外,我不能打

我正在将finish事件绑定到小部件,它对第一个小部件工作良好,但对同一页面上的第二个小部件不起作用

未捕获的TypeError:无法读取null的属性“postMessage”

这就是我初始化它的方式

var widget = SC.Widget($instance[0]);
widget.bind(SC.Widget.Events.FINISH, function(){
    options.done();
});
用例是一次显示一个轨迹。第一个完成后,第二个加载。因为这个例外,我不能打第二个。我知道我可以使用SDK来实现这一点,但我正在尝试使用小部件,这样我就不必设计自己的UI

有什么想法吗?这显然是SoundCloud小部件API上的一个bug。我想看看是否有解决办法

编辑

更新以包含更多信息。这是一个非常简单的案例,没有什么特别之处

var $track1 = $('<iframe id="sc1" src="//w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/79973942&amp;hide_related=true&amp;visual=true&amp;auto_play=true" frameborder="0"></iframe>');
$('body').append($track1);
var widget = SC.Widget($track1[0]);
widget.bind(SC.Widget.Events.FINISH, function(){
    $track1.remove();
    var $track2 = $('<iframe id="sc2" src="//w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/131713700&amp;hide_related=true&amp;visual=true&amp;auto_play=true" frameborder="0"></iframe>');
    $('body').append($track2);
    var widget = SC.Widget($track2[0]);
    widget.bind(SC.Widget.Events.FINISH, function(){
        console.log('Done');
    });
});
简化的JS——这几乎就是Javascript。这没什么特别的

var $track1 = $('<iframe id="sc1" src="//w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/79973942&amp;hide_related=true&amp;visual=true&amp;auto_play=true" frameborder="0"></iframe>');
$('body').append($track1);
var widget = SC.Widget($track1[0]);
widget.bind(SC.Widget.Events.FINISH, function(){
    $track1.remove();
    var $track2 = $('<iframe id="sc2" src="//w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/131713700&amp;hide_related=true&amp;visual=true&amp;auto_play=true" frameborder="0"></iframe>');
    $('body').append($track2);
    var widget = SC.Widget($track2[0]);
    widget.bind(SC.Widget.Events.FINISH, function(){
        console.log('Done');
    });
});
编辑2


忘了提到这些帧是动态添加的。我已经调整了代码以匹配。

嘿,你能显示整个代码吗?在这里,您只与代码示例中的一个小部件进行交互,因此很难准确地判断哪些小部件不起作用,谢谢!这几乎就是全部。将进行编辑以同时包含HTML。您的示例按预期工作:转到此处查看实际不包含的代码。也许我漏掉了一个细节。iframe将动态附加到页面中,并自动播放。您的示例删除了auto_play参数,这可能是一个解决方法。我以后再试试。我的用例可以包含100条轨迹,因此所有小部件都会动态附加