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 http://www.karelbilek.com/musicalibre/のフレームに URL https://w.soundcloud.com/player/のフレームからアクセスしようとしています。アクセスを要求するフレームには「https」のプロトコルがあり、アクセスされるフレームには「http」のプロトコルがあります。プロトコルが一致する必要があります。




そしてエラー

SoundCloud ウィジェットの URL が指定されていません

ウィジェットで。今、私は何を間違っていますか？console.log が 3 回実行されるのはなぜですか? 何もロードされないのはなぜですか? エラーが表示されるのはなぜですか?

4

1 に答える 1

3

わかりました、わかりました。重要なこと:

  • 事前に HTML5 ウィジェットに何かをロードする必要があります。そうしないと、ロードされず、リロードすることさえできません。それが何であれ、存在するトラックでなければなりません。

  • http://developers.soundcloud.com/blog/html5-widget-apiの例は間違っています。すべてではなく、widget.load のパラメーターとしてトラック URL を配置する必要があります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 に答える