찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript SDK에서 SoundCloud API를 사용하는 방법에 대한 그래픽 코드에 대한 자세한 설명

JavaScript SDK에서 SoundCloud API를 사용하는 방법에 대한 그래픽 코드에 대한 자세한 설명

黄舟
黄舟원래의
2017-03-08 14:41:582241검색

SoundCloud는 개발자가 사용할 수 있는 API를 개발했습니다. 이 API를 통해 개발자는 원하는 거의 모든 데이터를 얻을 수 있습니다. 그러나 현재 SoundCloud API 개발 문서와 문서 예제는 서로 다른 버전의 SDK(Software Development Kit)를 사용하기 때문에 이 API의 사용법은 특히 초보자에게는 다소 혼란스럽습니다.

SoundCloud API와 SoundCloud SDK의 차이점은 무엇인가요? 기본적으로 SoundCloud API는 개발자에게 SoundCloud 서버에서 데이터를 얻을 수 있는 권한을 제공하는 URL 모음이고, SoundCloud SDK는 SoundCloud API를 쿼리하기 위해 미리 작성된 라이브러리(또는 클라이언트)입니다. 이에 대해 더 자세히 알고 싶다면 다음 링크를 클릭하세요. http://www.php.cn/

이 튜토리얼에서는 SoundCloud API에 액세스하는 방법과 단순화하는 방법을 알아봅니다. SoundCloud SDK를 사용하는 과정입니다. SoundCloud에서 SoundCloud SDK를 설정하는 방법을 배운 다음 JavaScript 코드를 작성하여 SoundCloud 데이터를 가져오고 오디오를 재생하며 SoundCloud에서 제공하는 추가 기능을 살펴보겠습니다.

시작 가이드

HTTP와 API의 개념과 작업 방법을 이해하면 이 튜토리얼을 학습하는 데 도움이 될 것입니다. API에 대해 더 알고 싶다면 API 소개(API 소개. 링크 주소: http://www.php.cn/)를 살펴보는 것이 좋습니다. 이 튜토리얼을 따라가면서 비동기 JavaScript, Promise 및 콜백 함수에 대해 조금 아는 것도 도움이 될 것입니다. 이 기사의 코드 예제에서는 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 페이지를 만듭니다. SDK의 기능을 사용할 수 있도록 이 페이지의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 src 속성에 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가 웹페이지에 올바르게 로드되었는지 테스트할 수 있습니다.

  • 브라우저로 이 페이지를 여세요(Google의 Chrome 브라우저 사용을 권장합니다).

  • 브라우저에서 개발자 콘솔을 엽니다(Google Chrome 브라우저에서 개발자 콘솔을 여는 단축키는 Ctrl+Shift+J입니다).

  • 개발자 콘솔에 SC를 입력하고 Enter를 누릅니다. SC는 방금 HTML 페이지에 포함시킨 SDK에 의해 생성된 JavaScript 개체입니다.

알 수 없는 오류가 발생하면 SoundCloud SDK가 올바르게 로드되지 않은 것입니다. 새로 고쳐서 SDK 파일(즉, sdk.js 파일)의 경로가 올바른지 확인하세요.

SoundCloud 앱 등록

SoundCloud 앱을 등록하려면 SoundCloud 계정만 있으면 됩니다. 아직 SoundClound 계정이 없다면 계정을 만드세요. 앱을 등록하면 SoundCloud 서버가 요청을 인증할 수 있으므로 다른 사람이 우리를 대신하여 요청을 보낼 수 없습니다.

참고: 당사 웹사이트에서 SoundClound 사용자 로그인 기능을 사용하지 않을 경우 이 단계를 건너뛸 수 있습니다. 이에 대해서는 다음 섹션에서 설명하겠습니다.

  • SoundClound 앱 페이지를 엽니다. 우리가 만든 모든 앱이 이 페이지에 나열됩니다. SoundCloud 계정에 로그인되어 있는지 확인하세요. 참고: 이 목적을 위해 별도의 계정을 만들 필요는 없습니다. 귀하는 개인적인 목적으로 동일한 계정을 사용할 수 있습니다.

  • 새 앱 등록 버튼을 클릭하세요.
    Screenshot of the SoundCloud application dashboard

  • 앱 이름을 지정하고 확인란을 클릭하여 SoundCloud 개발자 정책 약관에 동의하세요.
    Screenshot of choosing a name for the SoundCloud App

  • 点击那个大大的”注册”按钮,来完成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(&#39;https://soundcloud.com/username/complete-url-to-the-track&#39;, {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设置里我们需要在回调字段里给定的文件。

Screenshot of setting the redirect URL

我们需要在回调文件里使用的代码在开发文档里有提供。然而，开发文档有点过时，因此我们需要稍微调整一下来满足现在的开发需要标准。

你可以根据你个人的喜好来调整它的通知和设计,但是现在,我们使它越简单越好:

<!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

Mustaghees Butt 是一名Web开发人员和作家

Mustaghees是一名自由的Web设计师和开发者，他有时也写些文章和教程。

他的兴趣包括计算机科学(包括机器人技术，AI人工智能和网络技术)和文学艺术。

위 내용은 JavaScript SDK에서 SoundCloud API를 사용하는 방법에 대한 그래픽 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript의 멋진 가이드에 대한 자세한 그래픽 및 텍스트 설명다음 기사：JavaScript의 멋진 가이드에 대한 자세한 그래픽 및 텍스트 설명

관련 기사

더보기