“在动态生成的Div中嵌入Soundcloud播放器时,无法调用方法'oEmbed'为null”

时间:2013-03-12 07:16:28

标签: javascript soundcloud

使用Soundcloud JavaScript API,我想使用跟踪搜索结果动态生成一个播放器小部件页面。我的代码如下:

<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>

<script>
function makeDivsFromTracks(tracks,SC)
{
 var track;
 var permUrl;
 var newDiv;
 for(var ctr=0;ctr<tracks.length;ctr++)
 {
  newDiv=document.createElement("div");
  newDiv.id="track"+ctr;
  track=tracks[ctr];
  SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
  document.body.appendChild(newDiv);
 }
}
</script>

</head>
<body>

<script>
SC.initialize({
    client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{to:900000},tags:'hitech',downloadable:true},
        function(tracks,SC)
        {
         makeDivsFromTracks(tracks,SC);
        });
</script>

</body>
</html> 

当我加载它时,SC.oEmbed()调用会抛出错误:

Uncaught TypeError: Cannot call method 'oEmbed' of null 

似乎表明没有生成div或者没有返回搜索结果,但是如果我删除SC.oEmbed()调用并将其替换为:

newDiv.innerHTML=track.permalink_url;

然后我得到了一个很好的搜索结果网址列表。

如果我使用静态div和静态URL创建窗口小部件,例如

<body>
<div id="putTheWidgetHere"></div>
<script>
SC.initialize({
    client_id: 'MY_CLIENT_ID'
});
SC.oEmbed("http://soundcloud.com/exampleTrack", {color: "ff0066"},  document.getElementById("putTheWidgetHere"));
</script>
</body>

然后也可以正常工作。那么我的oEmbed()调用这些动态创建的元素有什么问题呢?

1 个答案:

答案 0 :(得分:1)

解决了它。我从回调函数和SC中取出makeDivsFromTracks()参数,现在所有玩家都出现了。不确定为什么这样做 - 也许它与SDK脚本引用中定义的SC对象有关,所以它是全局可用的,不需要传递给函数?

无论如何,工作代码是:

<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>

<script>
function makeDivsFromTracks(tracks)
{
 var track;
 var permUrl;
 var newDiv;
 for(var ctr=0;ctr<tracks.length;ctr++)
 {
  newDiv=document.createElement("div");
  newDiv.id="track"+ctr;
  track=tracks[ctr];
  //newDiv.innerHTML=track.permalink_url;
  SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
  document.body.appendChild(newDiv);

 }
}
</script>

</head>
<body>

<script>
SC.initialize({
    client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{from:180000,to:900000},tags:'hitech',downloadable:true},function

(tracks){makeDivsFromTracks(tracks);});
</script>

</body>
</html>