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运行了三次，为什么什么都没有加载，为什么我看到错误？

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>

这些错误仍在出现，但它们并没有真正的相关性。