SoundCloud开发出了一款可被开发者使用的API，这款API能使开发者获得他们想要的几乎任何数据。但是该API的用法有些混乱，特别是对初学者来说，因为此时的SoundCloud API开发文档和文档示例使用的都是SDK(软件开发工具箱)的不同版本。
SoundCloud API和SoundCloud SDK之间有什么区别呢？从根本上说,SoundCloud API是一个URL的集合，它给开发者提供了从SoundCloud服务器获取数据的权限，而SoundCloud SDK是为查询SoundCloud API提前写好的库(或者客户端)。如果想了解更多关于这方面的内容,点击以下链接：http://www.php.cn/
在这个教程里，我们将学到如何访问SoundCloud API和如何简化使用SoundCloud SDK的过程。我们将从SoundCloud上学习如何设置SoundCloud SDK，然后接着编写JavaScript代码来获取SoundCloud数据，播放音频和更多SoundCloud提供的功能。
入门指南
了解HTTP和API的概念和工作方式对你学习本教程将会有帮助。如果你想了解更多关于API的信息,我推荐你看看:An Introduction to APIs(对API的一个介绍。链接地址:http://www.php.cn/)。同时知道一点关于异步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页面，该页面用作我们的主页。我们在这个页面上3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的属性src里包含进了SDK的地址，这样我们就可以使用SDK的功能了。
<!DOCTYPE html>
<html>
<head>
<title>Include SDK - Using SoundCloud API</title>
<script src="//connect.soundcloud.com/sdk.js"></script>
</head>
<body></body>
</html>注意:我们在HTML页面里的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的src里包含进去的SDK地址是SoundCloud的服务器地址。你也可以把SDK下载下来，然后像下面这样引用:
<script src="sdk.js"></script>
可以通过下面的方法步骤测试一下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("<li>" + response[i].title + "</li>");
}
});
上面的代码是干什么的，它是用来查询/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。
该方法的第二个参数是可选参数,在这个参数里,我们可以为播放器设置一些选项。
第三个参数是一个回调函数,在这个回调函数里,我们将我们页面里的(id为player)的一个元素的内容用该播放器(res.html)的HTML代码替换。
这个跟踪路径可以用来在一个网站里嵌入一首歌或者一首音乐。
实现用户登录
为了实现用户登录功能,我们需要有一个回调URL来达到验证授权的目的。这是OAuth协议的要求。如果你想了解OAuth协议，这里有一个OAuth协议的简单解释:OAuth 2 Simplified(链接地址:http://www.php.cn/)。因此让我们在app设置里添加一个名为”callback.html”的回调URL，这个callback.html我们接下来就会创建。
OAuth协议介绍链接地址: http://www.php.cn/
创建回调页
在一个用户登录后，弹出式窗口会重定向到该文件。在我们的例子中，我们把该文件定义为”callback.html”，并且该文件和我们的主页(index.html)保存在相同的目录里。这个文件就是在我们的app设置里我们需要在回调字段里给定的文件。
我们需要在回调文件里使用的代码在开发文档里有提供。然而，开发文档有点过时，因此我们需要稍微调整一下来满足现在的开发需要标准。
你可以根据你个人的喜好来调整它的通知和设计,但是现在,我们使它越简单越好:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body>
<h4>This popup should automatically close in a few seconds</h4>
<script>
document.onload = function () {
window.opener.setTimeout(window.opener.SC.connectCallback, 1);
}
</script>
</body>
</html>用户登录
SC.connect(callback)就是实现用户登录功能的方法。它通过打开一个弹窗式的窗口,提醒用户登录他们的SoundCloud账户。基本的使用方法如下:
SC.connect(function () {
console.log("User has logged in");
});如下是更有趣的示例:
SC.connect(function () {
SC.get("/me", function (response) {
console.log("Welcome" + response.username);
});
});让我们分段来看它:
在用户完成登录以后，用户登录页面将会被重定向到我们之前创建的callback.html页面。
然后随着我们阅读完callback.html里的代码,弹出式窗口会自动关闭。
在那之后，我们的回调函数将获得回调,该回调是在SC.get()方法里通过一个GET请求到”/me”端点获得的。
当GET请求完成时，上述代码的回调函数就会执行,然后在控制台会输出一条欢迎登陆的信息。
注意:请求”/me”返回的是当前登陆用户的数据。因此，在用户登录之前请求该URL将产生一个错误的信息。
处理用户数据
一旦用户登录完成，有很多事情我们可以做。为了演示一些功能,我在GitHub上创建了一个演示站点。
让我们看看这两个文件。在index.html里,有四个重要的p元素,它们在用户完成登录后将会填满用户的数据:
<main>
<p id="ui">
<h2>Welcome <span></span></h2>
<img id="avatar" />
<p id="description"></p>
</p>
<!-- TRACKS -->
<p id="tracklist">
<h3>Your Tracks:</h3>
<ul></ul>
</p>
<!-- PLAYLISTS -->
<p id="playlists">
<h3>Your Playlists:</h3>
<ul></ul>
</p>
<p id="player"></p>
</main>第二个最重要的文件是script.js:所有的奇迹都发生在这个文件里。大部分代码我们都很熟悉，但是我们还是快速地看看:
// Initialization of SDK
SC.initialize({
client_id: "21832d295e3463208d2ed0371ae08791",
redirect_uri: "http://mustagheesbutt.github.io/SC_API/callback.html"
});首先初始化我们的app。注意，这次我们用redirect_uri指定了我们的callback.html页面。这个URL或者URI必须和我们在app设置里指定的一致。
// Login handler
var user_perma;
$("#login").click(function () {
SC.connect(function () {
SC.get("/me", function (me) {
user_perma = me.permalink;
setUI(me.username, me.avatar_url, me.description);
});
if (SC.isConnected) {
$("header, main").addClass("loggedIn");
}
getTracks();
getPlaylists();
});
});然后我们给标签id为login的button添加一个点击事件句柄。当该按钮被点击时，将会在点击事件代码里执行SC.connect(callback)代码,该代码执行后，将会弹出一个窗口提示用户登录。
当用户登录完成后，弹出的窗口会关闭。然后SC.connect()里的回调函数就会执行。在回调函数里，我们对”/me”端点发起一个GET请求,而”/me”端点返回当前登录用户对象。在刚才我们发起的GET请求回调里，我们在变量user_perma里存储用户的永久链接，该参数是在全局范围定义的，所以我们之后可以使用它。
setUI()方法，getTracks()方法和getPlaylists()方法的功能分别是，设置UI，列出用户的跟踪记录和列出每个用户的播放列表。这些功能在同一个文件里已经被定义了。
//找点东西播放
function play(uri) {
url = "http://soundcloud.com/" + user_perma + "/" + uri;
SC.oEmbed(url, {maxheight: 200}, function (resp) {
$("#player").html(resp.html);
});
}
//当一个播放轨迹或者一个播放列表被检查时,使用’play()’函数播放
$("ul").on("click", function (e) {
var title = e.target.innerHTML;
if ( tracks.hasOwnProperty(title) ) {
play(tracks[title]);
} else if (playlists.hasOwnProperty(title)) {
play("sets/" + playlists[title]);
}
});当任何跟踪路径或者播放列表名被点击，play()方法就会执行，该方法会为点击的跟踪路径或者播放列表名通过SC.oEmbed()方法来在我们的页面中嵌入一个音频播放器。
我们能通过代码做很多事情，例如获取用户类型或者更新用户的信息，获取用户的头像，接下来运行代码看看SoundCloud服务器返回的信息里用户是谁和他们的爱好是什么。
总结
如果老版本的SDK的用户登录功能可以使用，请使用老版本的SDK。因为老版本的SDK稳定，并且返回的数据使用回调函数返回。
如果老版本的用户登录功能不可用，可以使用SDK的新版本。新版本的SDK使用promises来返回数据。
通过一个简单的GET请求就能访问SoundCloud API获取到数据。
用户特有的数据可以通过”/me”端点获取，但是只有在用户使用他们的SoundCloud账户登录我们的网站的情况下才有效。
从客户端查询一个API是一个很强大的工具，因为它在复杂的后端保存了我们的信息。SDK使我们的编程生活变得简单很多。在学习了它的基础用法后，我们甚至可以编写出更加强大的和用户更加友好的web应用。点击查看一些示例(链接地址: http://www.php.cn/),并且查看官方的SoundCloud文档来学习更多关于这个强大的API的可以使用的方法。
我希望从你那里听到你用SoundCloud SDK构建的应用的信息(或者正计划构建的应用的信息)。请让我看见你们的评论!
作者介绍：
Mustaghees Butt 是一名Web开发人员和作家
Mustaghees是一名自由的Web设计师和开发者，他有时也写些文章和教程。
他的兴趣包括计算机科学(包括机器人技术，AI人工智能和网络技术)和文学艺术。
以上是如何在JavaScript SDK里使用SoundCloud API的图文代码详解 的详细内容。更多信息请关注PHP中文网其他相关文章！
JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AMJavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AMPython更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AMPython和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver Mac版
视觉化网页开发工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
