本篇内容主要讲解“如何在JavaScript SDK里使用SoundCloud API”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何在JavaScript SDK里使用SoundCloud API”吧!
凤台网站建设公司成都创新互联,凤台网站设计制作，有大型网站制作公司丰富经验。已为凤台上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的凤台做网站的公司定做！
入门指南
Promises介绍链接地址: http://www.oschina.net/translate/what-is-the-point-of-promises?print
了解HTTP和API的概念和工作方式对你学习本教程将会有帮助。如果你想了解更多关于API的信息,我推荐你看看:An Introduction to APIs(对API的一个介绍。链接地址:https://zapier.com/learn/apis/)。同时知道一点关于异步JavaScript，promises和回调函数对你学习本教程也是有帮助的。在本文我们的代码示例中使用了jQuery，所以如果你了解jQuery的基本知识，那么你阅读本文的代码示例就不会那么痛苦。
为了使用JavaScript来开始查询SoundClound API，我们需要下载由SoundClound提供的JavaScript SDK。就像在文章开头提到的，这里共有两个不同的SDK版本可以使用。
使用哪个版本的SDK呢?
这两个版本的SDK的主要不同之处在于当一个异步请求产生并将请求发送给SoundClound API时它们返回数据的方式不同。***版本的SDK返回的是一个Promise，而另一个版本的SDK需要把一个回调函数作为一个参数返回。
我注意到一个问题，随着文档使用的SDK版本，在该版本的SDK用户登录功能界面上似乎有一个问题，这个问题就是弹出的登录窗口不会自动关闭。
因此，为了简单起见，并且因为老版本SDK更稳定，我们将在文章示例中使用老版本的SDK来贯穿本教程。此版本的SDK将需要为客户端的异步请求返回一个回调函数。
使用SoundCloud API
设置一个基本的HTML文档
我们创建一个基本的HTML页面，该页面用作我们的主页。我们在这个页面上
注意:我们在HTML页面里的
可以通过下面的方法步骤测试一下SoundCloud的SDK是否在你的网页中被正确加载：
用浏览器打开这个页面(建议使用谷歌的Chrome浏览器)。
在浏览器里打开开发者控制台(在谷歌Chrome浏览器里打开开发者控制台的快捷键是Ctrl+Shift+J)。
在开发者控制台里输入SC,然后按Enter键。SC就是刚刚我们在HTML页面里包含的SDK创建的一个JavaScript对象。
如果出现了未知的错误，那就说明SoundCloud的SDK没有被正确加载。试着刷新一下，同时确定你的SDK文件(也就是sdk.js文件)的路径是正确的。
注册一个SoundCloud App
去注册一个SoundCloud app，你需要做的就是拥有一个SoundCloud账户。如果你还没有一个SoundClound账户，就去创建一个。通过注册一个 app，SoundCloud服务器就能够验证我们的请求，这样其他人就不可能以我们的名义来发送一个请求了。
注意：如果我们不准备在我们自己的网站中使用SoundClound用户登录功能，我们可以跳过这一步。这将在下面的部分解释。
打开SoundClound app页面。在这个页面上所有我们已经创建好的app都会被列出来。确保你登录了你的SoundCloud账户。注意:你不用为了这个目的创建一个独立的账户。你可以用同一个账户来为你的个人目的使用。
点击注册一个新应用按钮。
给你的app起一个名字,然后点击复选框接受SoundCloud的开发者政策条款。
点击那个大大的”注册”按钮,来完成app的注册。
在我们成功注册之后，注册页面将直接跳转到我们刚刚创建好的app设置页面。在app设置页面上，我们将看到我们的app客户端ID，这个ID将会被用来验证授权我们的请求。我们可以关掉该页面,然后现在开始回调字段了。我们之后会用到这个客户端ID的。
初始化客户端
通过”初始化客户端”，那也就是意味着我们使客户端准备好在它和SoundCloud API之间做数据的交换。我们可以在我们之前创建的基本HTML文档里来做初始化客户端的工作，或者在一个内部js文件里来做初始化客户端的工作。
JavaScript语法是这样做的:
SC.initialize({
client_id: "CLIENT_ID",
redirect_uri: "CALLBACK_URL"
});
(代码见原文)
让我们分段来看它:
上面代码中的CLIENT_ID会在我们注册app的时候提供给我们。
上面代码中的CALLBACK_URL是callback.html的URL,这个callback.html是用户登录后一个HTML文件的称呼。我们很快就会创建它。
在初始化完成之后,现在我们可以准备查询SoundCloud API了。让我们看看在那之前我们可以做的一些例子。
示例
如果我们打开浏览器的控制台并输入”SC.”，然后与SC对象有关的方法就会列出来。SC.get(uri,callback)就是其中一个方法，这个方法用来向SoundCloud API产生GET请求。
获得一份跟踪列表
为了获得跟踪的随机列表，我们可以使用SC.get()方法,像下面这样:
SC.get("/tracks", function(response) {
for (var i = 0; i < response.length; i++) {
$("ul").append("
- " + response[i].title + "
");}
});
(代码见原文)
上面的代码是干什么的，它是用来查询/tracks端点并且在查询完端点后返回一个回调函数的。响应数据是保存在回调响应参数里的，它是一个有着很 多属性的JavaScript对象数组，title属性就是众多属性中的一个。我们可以在代码里写:console.log(response[0])来 在控制台日志输出响应数据的***个，而不用循环遍历所有的对象和对象所对应的属性。然后,我们就会知道哪些属性我们可以使用。
注意:在这个代码示例中，我们在初始化的时候并没有指定一个回调URL。这是因为我们指定不指定都不重要。不管怎样我们的代码都会执行。但是一旦我 们实现了用户登录功能，这就是必须的而且很重要了，因为当你指定一个回调URL后，其他人就不可能使用我们的Client ID。
嵌入一段跟踪代码
SC对象提供了其他的方法:SC.oEmbed(url,options,callback)。该方法把SoundCloud播放器嵌入我们的网站，并且允许我们播放我们选择的轨迹。
SC.oEmbed('https://soundcloud.com/username/complete-url-to-the-track', {maxheight: 200, auto_play: false}, function(res) { $("#player").html(res.html); });我们分段来看它:
首先在该方法的***个参数里,我们给了一个完整的我们想要播放的跟踪URL。
该方法的第二个参数是可选参数,在这个参数里,我们可以为播放器设置一些选项。如果想了解更多,点击下面链接:https://developers.soundcloud.com/docs/api/reference#oembed
第三个参数是一个回调函数,在这个回调函数里,我们将我们页面里的(id为player)的一个元素的内容用该播放器(res.html)的HTML代码替换。
这个跟踪路径可以用来在一个网站里嵌入一首歌或者一首音乐。
实现用户登录
为了实现用户登录功能,我们需要有一个回调URL来达到验证授权的目的。这是OAuth协议的要求。如果你想了解OAuth协议，这里有一个OAuth协议的简单解释:OAuth 2 Simplified(链接地址:https://aaronparecki.com/2012/07/29/2/oauth3-simplified)。因此让我们在app设置里添加一个名为”callback.html”的回调URL，这个callback.html我们接下来就会创建。
OAuth协议介绍链接地址: http://menglimengwai.iteye.com/blog/496250
创建回调页
在一个用户登录后，弹出式窗口会重定向到该文件。在我们的例子中，我们把该文件定义为”callback.html”，并且该文件和我们的主页(index.html)保存在相同的目录里。这个文件就是在我们的app设置里我们需要在回调字段里给定的文件。
我们需要在回调文件里使用的代码在开发文档里有提供。然而，开发文档有点过时，因此我们需要稍微调整一下来满足现在的开发需要标准。
你可以根据你个人的喜好来调整它的通知和设计,但是现在,我们使它越简单越好: