suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des Grafikcodes zur Verwendung der SoundCloud-API im JavaScript SDK

Detaillierte Erläuterung des Grafikcodes zur Verwendung der SoundCloud-API im JavaScript SDK

黄舟
黄舟Original
2017-03-08 14:41:582291Durchsuche

SoundCloud hat eine API entwickelt, die von Entwicklern verwendet werden kann. Diese API ermöglicht es Entwicklern, nahezu alle gewünschten Daten zu erhalten. Die Verwendung dieser API ist jedoch insbesondere für Anfänger etwas verwirrend, da die SoundCloud API-Entwicklungsdokumentation und Dokumentationsbeispiele derzeit unterschiedliche Versionen des SDK (Software Development Kit) verwenden.

Was ist der Unterschied zwischen SoundCloud API und SoundCloud SDK? Grundsätzlich handelt es sich bei der SoundCloud-API um eine Sammlung von URLs, die Entwicklern die Erlaubnis gibt, Daten vom SoundCloud-Server abzurufen, und das SoundCloud SDK ist eine vorab geschriebene Bibliothek (oder ein Client) zum Abfragen der SoundCloud-API. Wenn Sie mehr darüber erfahren möchten, klicken Sie auf den folgenden Link: http://www.php.cn/

In diesem Tutorial erfahren Sie, wie Sie auf die SoundCloud-API zugreifen und diese vereinfachen Der Prozess der Verwendung des SoundCloud SDK. Wir lernen, wie man das SoundCloud SDK von SoundCloud aus einrichtet und schreiben dann JavaScript-Code, um SoundCloud-Daten abzurufen, Audio abzuspielen und weitere von SoundCloud bereitgestellte Funktionen zu nutzen.

Erste Schritte

Das Verständnis der Konzepte und Arbeitsmethoden von HTTP und API wird Ihnen beim Studium dieses Tutorials hilfreich sein. Wenn Sie mehr über APIs erfahren möchten, empfehle ich Ihnen einen Blick darauf: An Introduction to APIs (eine Einführung in APIs. Linkadresse: http://www.php.cn/). Es wird auch hilfreich sein, ein wenig über asynchrones JavaScript, Versprechen und Rückruffunktionen zu wissen, wenn Sie diesem Tutorial folgen. Wir verwenden jQuery in unseren Codebeispielen in diesem Artikel. Wenn Sie also die Grundlagen von jQuery kennen, wird das Lesen der Codebeispiele in diesem Artikel weniger schmerzhaft sein.

Um mit der Abfrage der SoundClound-API mithilfe von JavaScript zu beginnen, müssen wir das von SoundClound bereitgestellte JavaScript-SDK herunterladen. Wie am Anfang des Artikels erwähnt, stehen zwei verschiedene SDK-Versionen zur Verfügung.

Welche Version des SDK soll verwendet werden?

Der Hauptunterschied zwischen diesen beiden Versionen des SDK besteht in der Art und Weise, wie sie Daten zurückgeben, wenn eine asynchrone Anfrage gestellt und an die SoundClound-API gesendet wird. Die neueste Version des SDK gibt ein Promise zurück, während eine andere Version des SDK eine Rückruffunktion als Parameter zurückgeben muss.

Ich habe ein Problem mit der im Dokument verwendeten SDK-Version festgestellt. Es scheint ein Problem mit der SDK-Benutzeranmeldefunktionsoberfläche dieser Version zu geben. Dieses Problem besteht darin, dass das Popup-Anmeldefenster nicht automatisch angezeigt wird schließen.

Aus Gründen der Einfachheit und weil die ältere Version des SDK stabiler ist, werden wir in den Artikelbeispielen in diesem Tutorial die ältere Version des SDK verwenden. Diese Version des SDK muss eine Rückruffunktion für die asynchrone Anfrage des Clients zurückgeben.

Richten Sie ein einfaches HTML-Dokument mit der SoundCloud-API ein

Wir erstellen eine einfache HTML-Seite, die als unsere Homepage dient. Wir fügen die Adresse des SDK in das Attribut src des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags auf dieser Seite ein, damit wir die Funktionen des SDK nutzen können. 

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

Hinweis: Die SDK-Adresse, die wir in die Quelle des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags einfügen, ist die SoundCloud-Serveradresse. Sie können das SDK auch herunterladen und dann wie folgt zitieren: 

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

Mit den folgenden Schritten können Sie testen, ob das SoundCloud SDK korrekt in Ihre Webseite geladen wird:

  • Öffnen Sie diese Seite mit einem Browser (es wird empfohlen, den Chrome-Browser von Google zu verwenden).

  • Öffnen Sie die Entwicklerkonsole im Browser (die Tastenkombination zum Öffnen der Entwicklerkonsole im Google Chrome-Browser ist Strg+Umschalt+J).

  • Geben Sie SC in die Entwicklerkonsole ein und drücken Sie die Eingabetaste. SC ist ein JavaScript-Objekt, das von dem SDK erstellt wurde, das wir gerade in die HTML-Seite eingefügt haben.

Wenn ein unbekannter Fehler auftritt, bedeutet dies, dass das SoundCloud SDK nicht korrekt geladen wurde. Versuchen Sie, es zu aktualisieren und stellen Sie sicher, dass der Pfad zu Ihrer SDK-Datei (d. h. der Datei sdk.js) korrekt ist.

Eine SoundCloud-App registrieren

Um eine SoundCloud-App zu registrieren, benötigen Sie lediglich ein SoundCloud-Konto. Wenn Sie noch kein SoundClound-Konto haben, erstellen Sie eines. Durch die Registrierung einer App sind die SoundCloud-Server in der Lage, unsere Anfragen zu authentifizieren, sodass niemand anderes in unserem Namen eine Anfrage senden kann.

Hinweis: Wenn wir die SoundClound-Benutzeranmeldefunktion nicht auf unserer eigenen Website verwenden, können wir diesen Schritt überspringen. Dies wird im folgenden Abschnitt erläutert.

  • Öffnen Sie die SoundClound-App-Seite. Alle von uns erstellten Apps werden auf dieser Seite aufgelistet. Stellen Sie sicher, dass Sie bei Ihrem SoundCloud-Konto angemeldet sind. Hinweis: Sie müssen zu diesem Zweck kein separates Konto erstellen. Sie können dasselbe Konto für Ihre eigenen persönlichen Zwecke verwenden.

  • Klicken Sie auf die Schaltfläche „Neue App registrieren“.
    Screenshot of the SoundCloud application dashboard

  • Geben Sie Ihrer App einen Namen und klicken Sie auf das Kontrollkästchen, um die Bedingungen der Entwicklerrichtlinie von SoundCloud zu akzeptieren.
    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人工智能和网络技术)和文学艺术。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Grafikcodes zur Verwendung der SoundCloud-API im JavaScript SDK. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Grafik- und Texterklärung des fantastischen JavaScript-LeitfadensNächster Artikel：Detaillierte Grafik- und Texterklärung des fantastischen JavaScript-Leitfadens

In Verbindung stehende Artikel

Mehr sehen