2013-03-12 38 views
0

使用Soundcloud JavaScript API時,我想使用曲目搜索結果動態生成一個播放器小部件頁面。我的代碼如下:「動態生成嵌入Soundcloud播放器時無法調用方法'空'空'Div

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

然後我得到的URL的一個很好的列表我的SE拱結果。

如果我使用靜態的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

解決了它。我從回調函數makeDivsFromTracks()中拿出了SC的參數,現在所有的玩家都出現了。不確定爲什麼這會起作用 - 也許它與在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> 
+0

使用appendTo如何追加SC.oEmbed玩家UL>裏? – jpcmf80 2015-04-26 03:50:25

相關問題