recherche

Maison >interface Web >js tutoriel >Explication détaillée du code graphique sur la façon d'utiliser l'API SoundCloud dans le SDK JavaScript

Explication détaillée du code graphique sur la façon d'utiliser l'API SoundCloud dans le SDK JavaScript

黄舟
黄舟original
2017-03-08 14:41:582242parcourir

SoundCloud a développé une API qui peut être utilisée par les développeurs. Cette API permet aux développeurs d'obtenir presque toutes les données qu'ils souhaitent. Cependant, l'utilisation de cette API est un peu déroutante, en particulier pour les débutants, car la documentation de développement de l'API SoundCloud et les exemples de documentation utilisent actuellement différentes versions du SDK (Software Development Kit).

Quelle est la différence entre l'API SoundCloud et le SDK SoundCloud ? Fondamentalement, l'API SoundCloud est un ensemble d'URL qui autorisent les développeurs à obtenir des données du serveur SoundCloud, et le SDK SoundCloud est une bibliothèque (ou client) écrite à l'avance pour interroger l'API SoundCloud. Si vous souhaitez en savoir plus, cliquez sur le lien suivant : http://www.php.cn/

Dans ce tutoriel, nous apprendrons comment accéder à l'API SoundCloud et comment simplifier Le processus d'utilisation du SDK SoundCloud. Nous apprendrons comment configurer le SDK SoundCloud à partir de SoundCloud, puis écrireons du code JavaScript pour obtenir des données SoundCloud, lire de l'audio et d'autres fonctionnalités fournies par SoundCloud.

Guide de démarrage

Comprendre les concepts et les méthodes de travail de HTTP et de l'API vous sera utile pour étudier ce tutoriel. Si vous souhaitez en savoir plus sur les API, je vous recommande de jeter un œil : An Introduction to APIs (une introduction aux API. Adresse du lien : http://www.php.cn/). Il sera également utile d'en savoir un peu plus sur le JavaScript asynchrone, les promesses et les fonctions de rappel en suivant ce didacticiel. Nous utilisons jQuery dans nos exemples de code dans cet article, donc si vous connaissez les bases de jQuery, la lecture des exemples de code dans cet article sera moins pénible.

Pour commencer à interroger l'API SoundClound à l'aide de JavaScript, nous devons télécharger le SDK JavaScript fourni par SoundClound. Comme mentionné au début de l'article, deux versions différentes du SDK sont disponibles.

Quelle version du SDK utiliser ?

La principale différence entre ces deux versions du SDK est la façon dont elles renvoient les données lorsqu'une requête asynchrone est effectuée et envoyée à l'API SoundClound. La dernière version du SDK renvoie une promesse, tandis qu'une autre version du SDK doit renvoyer une fonction de rappel en tant que paramètre.

J'ai remarqué un problème. Avec la version du SDK utilisée dans le document, il semble y avoir un problème sur l'interface de la fonction de connexion utilisateur du SDK de cette version. Ce problème est que la fenêtre de connexion contextuelle ne s'affiche pas automatiquement. fermer.

Par conséquent, par souci de simplicité, et parce que l'ancienne version du SDK est plus stable, nous utiliserons l'ancienne version du SDK dans les exemples d'articles tout au long de ce tutoriel. Cette version du SDK devra renvoyer une fonction de rappel pour la requête asynchrone du client.

Configurer un document HTML de base à l'aide de l'API SoundCloud

Nous créons une page HTML de base qui nous sert de page d'accueil. Nous incluons l'adresse du SDK dans l'attribut src de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a sur cette page, afin de pouvoir utiliser les fonctions du SDK. 

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

Remarque : L'adresse du SDK que nous incluons dans le src de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans la page HTML est l'adresse du serveur SoundCloud. Vous pouvez également télécharger le SDK, puis le citer comme ceci : 

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

Vous pouvez utiliser les étapes suivantes pour tester si le SDK SoundCloud est chargé correctement dans votre page Web :

  • Ouvrez cette page avec un navigateur (il est recommandé d'utiliser le navigateur Chrome de Google).

  • Ouvrez la console développeur dans le navigateur (la touche de raccourci pour ouvrir la console développeur dans le navigateur Google Chrome est Ctrl Shift J).

  • Entrez SC dans la console développeur et appuyez sur Entrée. SC est un objet JavaScript créé par le SDK que nous venons d'inclure dans la page HTML.

Si une erreur inconnue se produit, cela signifie que le SDK SoundCloud n'a pas été chargé correctement. Essayez de l'actualiser et assurez-vous que le chemin d'accès à votre fichier SDK (c'est-à-dire le fichier sdk.js) est correct.

Enregistrer une application SoundCloud

Pour enregistrer une application SoundCloud, il vous suffit d'avoir un compte SoundCloud. Si vous n'avez pas encore de compte SoundClound, créez-en un. En enregistrant une application, les serveurs SoundCloud sont capables d'authentifier nos demandes afin que personne d'autre ne puisse envoyer de demande en notre nom.

Remarque : si nous n'utilisons pas la fonction de connexion utilisateur SoundClound sur notre propre site Web, nous pouvons ignorer cette étape. Ceci sera expliqué dans la section suivante.

  • Ouvrez la page de l'application SoundClound. Toutes les applications que nous avons créées seront répertoriées sur cette page. Assurez-vous que vous êtes connecté à votre compte SoundCloud. Remarque : Vous n'avez pas besoin de créer un compte distinct à cet effet. Vous pouvez utiliser le même compte à vos fins personnelles.

  • Cliquez sur le bouton Enregistrer une nouvelle application.
    Screenshot of the SoundCloud application dashboard

  • Donnez un nom à votre application et cochez la case pour accepter les termes de la politique de développement de 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人工智能和网络技术)和文学艺术。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication graphique et textuelle détaillée du superbe guide de JavaScriptArticle suivant：Explication graphique et textuelle détaillée du superbe guide de JavaScript

Articles Liés

Voir plus