搜索

首页 >web前端 >js教程 >将SoundCloud API与Jav​​aScript SDK一起使用

将SoundCloud API与Jav​​aScript SDK一起使用

Christopher Nolan
Christopher Nolan原创
2025-02-18 11:20:10364浏览

将SoundCloud API与Jav​​aScript SDK一起使用

钥匙要点

    SoundCloud API
  • 允许开发人员访问所需的所有数据。 API是一个URL集合，可从SoundCloud服务器中访问数据，而SDK（软件开发套件）是用于查询API的预先编写的库。 SDK有两个版本。它们之间的主要区别是，当对API提出异步请求时，它们如何返回数据。最新版本返回承诺，而另一个则需要回调函数作为参数。
    • >
  • >要使用JavaScript开始查询SoundCloud API，需要下载由SoundCloud提供的JavaScript SDK。对于用户蛋白功能，建议使用较旧的SDK版本，因为它更稳定。 可以使用简单的GET请求访问SoundCloud API的
    • >数据。可以使用 /ME端点获得特定于用户的数据，但前提 从客户端查询API可以从后端的复杂性中保存开发人员。 SDK简化了该过程，从而创建了更强大和用户友好的Web应用程序。
  • >本文由杰米·希尔兹（Jamie Shields）和韦恩·安克塔（Wern Ancheta）进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳功能！ SoundCloud提供了一个API，该API允许开发人员获得所需的所有数据。但是它的用法可能会令人困惑，尤其是对于初学者而言，因为到目前为止，SoundCloud API文档和示例使用了不同版本的SDK（软件开发套件）。
    • > API和SDK有什么区别？基本上，API是一个URL集合，可从SoundCloud服务器中访问数据，而SDK是用于查询API的预先编写的库（或客户端）。要了解更多信息，请参阅此讨论。
  • 在本教程中，我们将学习如何访问SoundCloud API以及如何使用SDK简化过程。我们将走路设置SDK，然后编写JavaScript以获取数据，从SoundCloud播放音频以及更多。
    • >
入门 知道HTTP和API的概念和工作将会有所帮助。如果您想了解有关API的更多信息，我推荐此简短课程：API介绍。对异步JavaScript，承诺和回调的一点了解也将有所帮助。我们的代码示例中使用了jQuery，因此知道基本知识不会受到伤害。

>

>要使用JavaScript开始查询SoundCloud API，我们需要下载SoundCloud提供的JavaScript SDK。如前所述，可用的SDK有两个不同的版本。

>

使用哪个版本的SDK？

>它们之间的主要区别是，当对API提出异步请求时，它们如何返回数据。最新版本返回承诺，而另一个则需要回调函数作为参数。

> 我注意到的一个问题是，对于文档使用的SDK版本，用户login功能似乎存在问题，因为弹出窗口不会自动关闭。 因此，为了简单起见，由于它更稳定，因此我们将在本教程中的示例中使用旧版本。此版本将需要异步请求的回调函数。

>

使用SoundCloud API

设置基本的HTML文档

>我们将创建一个基本的HTML页面，该页面将作为我们的主页。我们还将在此处包含SDK，以便我们可以利用其功能。

>

请注意，我们已直接从SoundCloud的服务器中包含了SDK。您还可以下载SDK并引用它：

> 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

测试SDK是否正确加载到您的网页中：> 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
>在浏览器中打开页面（推荐Chrome）。>

>在浏览器中打开开发人员控制台（

ctrl shift j
    ，在chrome中）。
  • 在控制台，键入SC并按Enter。 SC是由SDK创建的JavaScript对象
    • JavaScript对象。
  • 如果出现未定义的错误，则该错误未正确加载。尝试刷新并确保通往SDK文件（SDK.JS）的路径正确。 注册SoundCloud应用
  • >注册SoundCloud应用程序，您需要的只是一个SoundCloud帐户。如果您还没有一个，请继续创建一个。通过注册应用程序，SoundCloud服务器将能够验证我们的请求，因此没有其他人可以代表我们提出请求。> >
    • 注意：如果我们不打算在我们的网站中使用用户 - login功能，我们可以跳过此步骤。它将在下一部分中进行解释。

>

打开SoundCloud应用程序页面。在这里，我们已经创建的任何应用程序都将被列出。确保您已登录到SoundCloud帐户。

注意：您无需为此目的创建一个单独的帐户。您可以使用用于个人目的的相同帐户。

> >

单击
    >注册一个新的应用程序
  • 按钮。

    • >给它一个名字，并通过选中复选框来接受SoundCloud的开发人员策略。

  • >将SoundCloud API与Jav​​aScript SDK一起使用单击“大

    登记>”按钮，以完成应用程序注册。
    • >

>成功注册后，我们将被重定向到新创建的应用程序的设置页面。在那里，我们将找到我们的应用程序的client id ，该应用程序将用于授权我们的请求。我们可以暂时离开>网站和回调字段。我们稍后再解决。>

>初始化客户端

通过“初始化客户端”，我们的意思是让客户准备在自身和SoundCloud API之间交换数据。我们可以在我们之前创建的基本HTML文档中或在外部

.js文件中进行此操作。 javascript语法是：

>

让我们分解：
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

> client_id是在我们注册应用程序时向我们提供的。
  • callback_url是callback.html的URL，这是一个html文件，在用户登录后被调用。我们将尽快创建它。>
  • 现在，初始化后，我们准备查询SoundCloud API。让我们看看一些我们已经可以做的示例。
    • >
>示例

如果我们打开浏览器控制台和类型SC。，将出现与SC对象关联的方法的列表。 sc.get（uri，callback）是其中之一，用于向API提出请求。

获取曲目列表

要获取随机曲目列表，我们可以使用SC.Get（）这样：

>

>请参阅codepen上的sitepoint（@sitepoint）的笔列表。

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
>它的作用是，它查询 /跟踪端点并期望回调函数。响应存储在回调的响应参数中，该回答参数是具有多个属性的JavaScript对象的数组，标题是其中之一。我们可以console.log（响应[0]），而不是循环查看整个对象及其属性。然后，我们将知道我们可以访问哪些属性。

>

>注意，在此示例中，我们尚未在初始化期间指定回调URL。这是因为在这里我们是否指定它并不重要。无论哪种方式，我们的代码都可以正常工作。但是，当我们实现用户login功能时，它将很重要，因此没有人可以使用我们的客户端ID。

嵌入轨道

SC对象提供另一种方法，SC.Oembed（URL，选项，回调），该方法将SoundCloud播放器嵌入我们的网站中并允许我们播放我们选择的跟踪。

请参阅codepen上的sitepoint（@sitepoint）嵌入轨道的笔

让我们分解：

  • 首先，我们给它一个我们想要播放的曲目的完整URL。 在选项参数中，我们为播放器设置了一些选项。在这里查看更多。
    • 在回调函数中，我们用播放器的HTML代码（res.html）替换了页面中元素的内容（#player）。>
    • 这个技巧可用于在网站中嵌入歌曲或音乐。
  • >
    • 实现用户登录
为了实现用户蛋白功能，我们需要具有授权目的的回调URL。这是OAuth协议的要求。如果您对此感到好奇，这是一个简化的解释：OAuth 2简化。因此，让我们继续更新应用程序设置，以包括CALLBACK.HTML的回调URL，我们现在将要创建。

>

创建回调页

用户登录后，弹出窗口将其重定向到此文件。在我们的情况下，我们将其命名为callback.html，它将驻留在与主页（index.html）同一目录中。这是我们需要在应用程序设置中的回调字段中给出的文件。

>

文档中提供了我们需要在回调文件中使用的代码。但是，该文档有些过时，因此我们将稍微修改以符合现代标准。

>您可以按照自己的意愿修改其消息和设计，但是就目前而言，我们将尽可能简单地进行简单：

将SoundCloud API与Jav​​aScript SDK一起使用

在

中记录用户

sc.connect（回调）是实现用户login功能的方法。它打开一个弹出窗口，提示用户登录到其SoundCloud帐户。基本用法如下：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
一个更有趣的例子是：

>

让我们分解：

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>

>用户登录后，他们将被重定向到callback.html，我们之前创建了。

然后，弹出窗口将自动关闭，因为我们可以通过在callback.html中读取代码
<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
来猜测。

之后，我们的回调函数将被调用，在该函数中，使用sc.get（）method。

>一旦完成请求完成，其回调函数将执行并登录到控制台。>
  • 请注意，请求 /我将返回有关当前登录用户的数据。因此，在登录用户之前使用它将导致错误消息。
    • >
  • >使用用户的数据
  • >用户登录后，我们可以做更多的事情。为了演示一些力量，我在Github上创建了一个演示网站。您可以在此处找到源代码，并在此处查看它。
    • >
  • >让我们浏览两个文件。在index.html中，这四个DIV非常重要，因为用户登录后，它们会填写用户数据：>
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

    >下一个最重要的文件是script.js：所有魔术都发生在这里。大多数代码对我们来说都是熟悉的，但是让我们快速浏览它： 

    <span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
      首先，我们初始化我们的应用程序。请注意，这次我们将Redirect_uri指定为我们的callback.html页面。此URL或URI应与我们在应用程序设置中指定的URL完全匹配。
    • > 
    <span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
    然后，我们将单击事件处理程序连接到#Login按钮。单击时，将执行sc.connect（回调），该窗口打开弹出窗口，提示用户登录。 用户登录弹出窗口后，
      >关闭。然后执行sc.connect（）的回调函数。在回调功能中，我们向 /ME端点提出了一个get请求，该请求返回当前登录用户的对象。在我们刚刚提出的GET请求的回调中，我们将用户的永久链接存储在可变user_perma（在全局范围中定义的）中，因此我们可以稍后使用。
    • > functions setui（），getTracks（）和getPlayLists（），设置UI，列出用户的曲目并分别列出用户的播放列表。这些函数在同一文件中定义。
      • >
      • >当单击任何曲目或播放列表名称时，play（）函数执行，该函数使用sc.oembed（）方法在我们页面中嵌入音频播放器，用于该曲目或播放列表。
    > 
    <span>SC.get("/tracks", function(response) {
</span>  <span>for (var i = 0; i < response.length; i++) {
</span>    <span>$("ul").append("<li>" + response[i].title + "</li>");
</span>  <span>}
</span><span>});
</span>
      >我们可以做更多的事情，例如获取或更新用户的描述，获取用户的头像，查看用户所关注的人以及他们的收藏夹。
    • 摘要
    如果要使用用户 - login功能，请使用旧版本的SDK版本。它是稳定的，并且使用回调函数返回数据。

    >

    如果未使用用户蛋白功能，则可以使用较新的SDK版本。它使用承诺返回数据。

    SoundCloud API的数据可以通过简单的获取请求访问。> 可以使用 /ME端点获得

    >用户特定的数据，但是只有使用SoundCloud帐户将用户登录到我们的网站时。
      从客户端查询API是一种强大的工具，因为它使我们免于后端的复杂性，因此是一个强大的工具。 SDK使我们的生活变得更加轻松。在学习了基础知识之后，我们可以创建更强大和用户友好的Web应用程序。查看一些可能的示例，并查看官方的SoundCloud文档，以了解有关可用高级API方法的更多信息。
    • >我很想听听您使用SoundCloud SDK构建（或计划构建）的内容。在评论中让我知道！
      • >

      >常见问题（常见问题解答）关于将SoundCloud API与Jav​​aScript SDK

      一起使用

      >将SoundCloud API与Jav​​aScript SDK使用SoundCloud API的先决条件是什么？您还需要在SoundCloud上拥有一个SoundCloud帐户和注册应用程序。注册的应用程序将为您提供客户ID，这是提出API请求的必要条件。

      >

      >如何在SoundCloud上注册申请以获取客户端ID？

      SoundCloud，您需要登录到SoundCloud帐户并导航到“应用程序”部分。在这里，您可以通过提供必要的详细信息，例如应用程序名称，描述，网站和重定向URI来创建一个新的应用程序。创建应用程序后，将为您提供客户端ID。

      >如何使用我的客户端ID初始化SoundCloud API？ sc.Initialize方法并使用客户端ID传递对象。这是一个示例：

      sc.Initialize（{

      client_id：'your_client_id'

      }）;


      >

      替换'your_client_id'在您的注册应用程序的client.client_id'。 >
      >如何提出API请求以SoundCloud？

      您可以使用SC.Get方法提出API请求。此方法采用两个参数：端点和回调函数。终点是您要访问的API资源的URL，并且在收到API响应时执行回调函数。提出API请求，可以使用捕获方法来处理错误。此方法将函数作为参数，在发生错误时将执行。错误对象传递到此函数，允许您适当处理错误。

      >

      >如何使用SoundCloud API播放曲目吗？需要使用sc.stream方法。此方法将曲目的URI作为参数并返回流对象。然后，您可以使用此对象上的播放方法播放曲目。

      >如何暂停并恢复轨道？

      暂停轨道，您可以在流上使用暂停方法目的。要恢复曲目，您可以再次使用播放方法。

      >如何获取曲目的详细信息？

      获得曲目的详细信息，您可以使用sc.get。方法并将轨道的URI作为参数传递。 API响应将包含曲目的详细信息。

      >如何搜索曲目？

      搜索轨道，您可以使用sc.get方法并传递“/tracks”作为端点。您也可以传递查询参数以过滤轨道。例如，要搜索具有标题“ My Track”的曲目，您可以使用以下代码：

      sc.get（'/tracks'，{q：'my track'}）。然后（function function （tracks）{
      console.log（tracks）;
      }）;

      >我如何获取用户的轨道？

      sc.get方法并通过'/user/{user_id}/tracks'作为端点。用用户的ID替换“ {user_id}”。 API响应将包含用户的曲目。

      >

以上是将SoundCloud API与Jav​​aScript SDK一起使用的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript jquery chrome html Array Object Resource if for while checkbox include require try catch Directory Error Logging Filter register break using Event Collection JS console undefined function this promise github http ui issue embedding Access Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Find JavaScript Code Snippets by Functionality with Cocycles下一篇：DOM Tips and Techniques: Parent, Child, and Siblings

相关文章

查看更多