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/ https://w.soundcloud.com/player/。请求访问的帧有一个 'https'的协议，被访问的帧具有协议 'HTTP'。协议必须匹配。

和错误

未提供SoundCloud小部件网址

小部件中的

。现在我做错了什么？为什么console.log运行三次，为什么没有加载，为什么我看到错误？

Answer 1

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

事先必须在HTML5小部件中加载某些东西，否则它永远不会被加载，你甚至无法重新加载它。它无关紧要，但它必须是一条存在的轨道。
这里的示例http://developers.soundcloud.com/blog/html5-widget-api是错误的 - 您应该将跟踪网址作为参数添加到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>

错误仍然存在，但它们并不真正相关。

Soundcloud HTML5 Widget未加载，抛出错误

1 个答案: