在JavaScriptSDK中使用SoundCloudAPI

SoundCloudSoundCloud开发了一个可供开发者使用的API。该API允许开发人员获取他们想要的几乎任何数据。但是API的使用有点混乱，尤其是初学者，因为此时的SoundCloudAPI开发文档和文档示例使用了不同版本的SDK（SoftwareDevelopmentKit）。SoundCloud介绍链接地址：http://baike.sogou.com/v128528573.htmSoundCloudAPI和SoundCloudSDK有什么区别？从根本上说，SoundCloudAPI是一组URL的集合，它为开发者提供从SoundCloud服务器获取数据的权限，而SoundCloudSDK是一个预先编写好的用于查询SoundCloudAPI的库（或客户端）。如果您想了解更多信息，请单击以下链接：http://stackoverflow.com/questions/834763/difference-between-an-api-and-sdk在本教程中，我们将学习如何访问SoundCloudAPI和如何简化使用SoundCloudSDK。我们将学习如何从SoundCloud设置SoundCloudSDK，然后继续编写JavaScript代码以使用SoundCloud获取SoundCloud数据、播放音频等。入门指南Promises介绍链接地址：http://www.oschina.net/translate/what-is-the-point-of-promises?print了解HTTP和API的概念和工作方式，对你的学习会有帮助本教程。如果你想了解更多关于API的知识，推荐你看看：AnIntroductiontoAPIs（API介绍。链接地址：https://zapier.com/learn/apis/）。在学习本教程时，了解一些有关异步JavaScript、承诺和回调的知识也很有帮助。在本文中，我们在代码示例中使用了jQuery，因此如果您了解jQuery的基础知识，那么阅读本文中的代码示例就不会那么痛苦。为了开始使用JavaScript查询SoundCloundAPI，我们需要下载SoundClound提供的JavaScriptSDK。正如文章开头提到的，有两个不同的SDK版本可用。使用哪个版本的SDK？两个版本的SDK之间的主要区别在于它们在发出异步请求并将其发送到SoundCloundAPI时返回数据的方式。最新版本的SDK返回一个Promise，而其他版本的SDK需要返回一个回调函数作为参数。我注意到一个问题。文档中使用的SDK版本，该版本的SDK用户登录功能界面好像有问题。这个问题是弹出的登录窗口不会自动关闭。因此，为了简单起见，也因为旧版本的SDK更稳定，我们将在整个教程的文章中的示例中使用旧版本的SDK。该版本的SDK需要为客户端的异步请求返回一个回调函数。使用SoundCloudAPI设置基本HTML文档我们创建一个基本HTML页面作为我们的主页。我们在这个页面的注意：HTML页面中document.onload=函数（）{窗口。opener.setTimeout(window.opener.SC.connectCallback,1);}用户登录SC.connect(callback)是实现用户登录功能的方法。它通过打开一个弹出窗口提醒用户登录他们的SoundCloud帐户来做到这一点。基本用法如下：SC.connect(function(){console.log("Userhasloggedin");});这是一个更有趣的例子：SC.connect(function(){SC.get("/me",function(response){console.log("Welcome"+response.username);});});我们分块来看：用户完成登录后，用户登录页面会被重定向到我们之前创建的callback.html页面。然后当我们阅读callback.html中的代码时，弹出窗口将自动关闭。之后我们的回调函数会得到回调，回调是通过在SC.get()方法中向“/me”端点发起GET请求获得的。当GET请求完成后，会执行上述代码的回调函数，然后在控制台输出欢迎登录信息。注意：请求“/me”返回当前登录用户的数据。因此，在用户登录之前请求此URL将生成一条错误消息。处理用户数据用户登录后，我们可以做很多事情。为了演示一些功能，我在GitHub上创建了一个演示站点。可以点击这里查看源码：https://github.com/sitepoint-editors/SC_API，也可以点击这里查看其实现效果：http://mustagheesbutt.github.io/SC_API/。让我们看看这两个文件。在index.html中，有四个重要的div元素会在用户登录后填充用户数据：