Code Academy:如何使这个Soundcloud API示例工作IRL

时间:2014-03-24 05:29:03

标签: javascript html css soundcloud

我尝试将确切的.html和.js代码放在网上并自己托管。

我想复制这个例子:http://www.codecademy.com/courses/javascript-intermediate-en-txGOj/0/2?curriculum_id=50ecb9bedc5e3250c40000c6

您可以在www [dot] whatsgucci [dot] com / cloudstalk.html

查看我的代码

这是我使用的代码:

HTML:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
        <script src="http://connect.soundcloud.com/sdk.js"></script>
        <script src="stalkscript.js"></script>
    </head>
    <body>
        <ul id="results">

        </ul>
    </body>
</html>

CSS:

#results {
    color: #000000;
    font-weight: bold;
    font-family: cursive;
}

JS:

SC.initialize({
  client_id: '5e3fe3759c70fe637cb15bab22e238e0'
});

$(document).ready(function() {
  SC.get('/tracks', { genres: 'festival trap' }, function(tracks) {
    $(tracks).each(function(index, track) {
      $('#results').append($('<li></li>').html(track.title + ' - ' + track.genre));
    });
  });
});

但最终没有出现

2 个答案:

答案 0 :(得分:1)

你究竟在哪里添加

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

你的例子目前已经完成,但没有添加jquery。你必须在soundcloud sdk import之上添加jquery,如下所示:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
        <script src="http://connect.soundcloud.com/sdk.js"></script>
        <script src="stalkscript.js"></script>
    </head>
    <body>
        <ul id="results">

        </ul>
    </body>
</html>

你可以在这里看到你的工作范例:
http://runnable.com/UzetnvwmO3pX9Eiq/code-academy-how-to-make-this-soundcloud-api-example-to-work-irl

答案 1 :(得分:0)

在代码中包含Jquery库

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>