Soundcloud HTML5 Widget 未加载，抛出错误

Question

我正在尝试使用 SoundCloud HTML5 小部件。

我想加载小部件，然后通过 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/ 来自带有 URL 的框架 https://w.soundcloud.com/player/。请求访问的帧有一个 'https' 协议，被访问的帧的协议为 'http'。协议必须匹配。

还有错误

未提供 SoundCloud 小部件 URL

在小部件中。现在我做错了什么？为什么 console.log 运行了 3 次，为什么什么都没有加载，为什么我会看到错误？

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>

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