1

我正在尝试使用 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 https://w.soundcloud.com/player/的框架访问具有 URL http://www.karelbilek.com/musicalibre/的框架。请求访问的帧具有“https”协议，被访问的帧具有“http”协议。协议必须匹配。

和错误

未提供 SoundCloud 小部件 URL

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

4

1 回答 1

3

好的，我想我明白了。关键的事情：

  • 必须事先在 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>

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

于 2013-03-21T03:45:39.347 回答