Soundcloud HTML5 Widget未加載，拋出錯誤

Question

我正在嘗試使用SoundCloud HTML5 Widget。

我想加載小部件，然後通過JavaScript告訴它玩什麼。但是，當我試圖通過這個代碼，要做到這一點

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


<iframe id="sc-widget" width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/"></iframe> 
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script> 



<script> 

var widgetIframe = document.getElementById('sc-widget'), 
     widget  = SC.Widget(widgetIframe), 
     newWidgetUrl = 'http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&show_artwork=true'; 

console.log("before load"); 
widget.load(newWidgetUrl); 
console.log("after load");  

</script> 

所有我在控制檯中看到的是

負載
負荷
後負荷
前負荷
後負荷
前前加載後
不安全的JavaScript嘗試訪問帶有URL的幀 http://www.karelbilek.com/musicalibre/與網址 https://w.soundcloud.com/player/。請求訪問的幀具有'https'的協議，被訪問的幀具有協議 'http'。協議必須匹配。

和

沒有的SoundCloud插件URL是提供

在widget

錯誤。現在我做錯了什麼？爲什麼console.log運行三次，爲什麼沒有加載，爲什麼我會看到錯誤？

Answer 1

好吧，我想我明白了。關鍵的東西：

• 東西必須在HTML5部件預先加載，否則它永遠不會被加載，你甚至不能重新加載它。不管它是什麼，但它必須是一個現存的軌道。

• 這裏的例子http://developers.soundcloud.com/blog/html5-widget-api是錯誤的 - 你應該把一個跟蹤URL作爲參數給widget.load，而不是整個w.soundcloud.com...的東西。

修訂，工作版本

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


<iframe id="sc-widget" width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F1848538&show_artwork=true"></iframe> 
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script> 



<script> 

var widgetIframe = document.getElementById('sc-widget'), 
     widget  = SC.Widget(widgetIframe), 
     newWidgetUrl = 'http://api.soundcloud.com/tracks/1848538'; 

console.log("before load"); 
widget.load(newWidgetUrl); 
console.log("after load");  

</script> 

的錯誤仍然會出現，但他們並不真正相關。