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> 

的错误仍然会出现，但他们并不真正相关。