SoundCloud a mis à disposition une API qui permet aux développeurs d'obtenir presque toutes les données qu'ils souhaitent. Mais son utilisation peut être déroutante, en particulier pour les débutants, car à l'heure actuelle, la documentation de l'API SoundCloud et les exemples utilisent différentes versions du SDK (kit de développement de logiciels).
Quelle est la différence entre l'API et le SDK? Fondamentalement, l'API est une collection d'URL qui donnent accès aux données des serveurs SoundCloud, et le SDK est une bibliothèque (ou client) pré-écrite pour interroger l'API. Pour en savoir plus, voir cette discussion.
Dans ce tutoriel, nous apprendrons à accéder à l'API SoundCloud et à simplifier le processus à l'aide du SDK. Nous allons marcher mais installer le SDK, puis écrire le javascript pour obtenir des données, lire l'audio et plus sur SoundCloud.
Connaître les concepts et les fonctions de HTTP et API sera utile. Si vous voulez en savoir plus sur les API, je recommande ce court cours: une introduction aux API. Un peu de connaissance du JavaScript asynchrone, des promesses et des rappels aidera également. jQuery est utilisé dans nos exemples de code, donc savoir que les bases ne feront pas de mal.
Pour commencer à interroger l'API SoundCloud à l'aide de JavaScript, nous devons télécharger le SDK JavaScript fourni par SoundCloud. Comme mentionné précédemment, il existe deux versions différentes du SDK disponibles.
La principale différence entre eux est la façon dont ils renvoient les données lorsqu'une demande asynchrone est faite à l'API. La dernière version renvoie une promesse, tandis que l'autre nécessite une fonction de rappel comme un paramètre.
Un problème que j'ai remarqué, c'est qu'avec la version du SDK utilisée par la documentation, il semble y avoir un problème avec la fonctionnalité de la login d'utilisateur, car la fenêtre contextuelle ne se ferme pas automatiquement.
Donc, pour la simplicité, et parce qu'il est plus stable, nous utiliserons l'ancienne version dans les exemples tout au long de ce tutoriel. Cette version nécessitera des fonctions de rappel pour les demandes asynchrones.
Nous créerons une page HTML de base qui servira de page d'accueil. Nous inclurons également le SDK ici, afin que nous puissions utiliser ses fonctionnalités.
<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>
Notez que nous avons inclus le SDK dans notre page directement à partir des serveurs de SoundCloud. Vous pouvez également télécharger le SDK et référence à celui-ci comme:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
pour tester si le SDK est chargé correctement dans votre page Web:
Si une erreur non définie apparaît, elle ne se charge pas correctement. Essayez de rafraîchir et assurez-vous que le chemin du fichier SDK (sdk.js) est correct.
Pour enregistrer une application SoundCloud, tout ce dont vous avez besoin est un compte SoundCloud. Si vous n'en avez pas déjà un, allez-y et créez-en un. En enregistrant une application, les serveurs SoundCloud pourront vérifier notre demande, afin que personne d'autre ne puisse faire une demande en notre nom.
Remarque: nous pouvons ignorer cette étape, si nous n'utilisons pas la fonctionnalité de login d'utilisateur dans notre site Web. Il sera expliqué dans la section suivante.
Ouvrez la page SoundCloud Apps. Ici, toutes les applications que nous avons déjà créées seront répertoriées. 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 que vous utilisez à des fins personnelles.
Cliquez sur le bouton Enregistrer un nouveau bouton Application .
Donnez-lui un nom et acceptez les stratégies de développement de SoundCloud en consultant la case à cocher.
Cliquez sur le bouton Big Enregistrer , pour terminer l'enregistrement de l'application.
Une fois que nous nous sommes inscrits avec succès, nous serons redirigés vers la page Paramètres de notre application nouvellement créée. Là, nous trouverons notre application ID client , qui sera utilisé pour autoriser nos demandes. Nous pouvons laisser les champs site Web et Rappel pour l'instant. Nous y reviendrons plus tard.
En «initialisant le client», nous voulons rendre le client prêt à échanger des données entre lui-même et l'API SoundCloud. Nous pouvons le faire dans notre document HTML de base, que nous avons créé plus tôt, ou dans un fichier externe .js .
La syntaxe JavaScript pour le faire est:
<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>
Décomposons-le:
Maintenant, après initialisation, nous sommes prêts à interroger l'API SoundCloud. Jetons un coup d'œil à quelques exemples de ce que nous pouvons déjà faire.
Si nous ouvrons la console de navigateur et le type SC., Une liste de méthodes associées à l'objet SC apparaîtra. SC.Get (URI, rappel) est l'un d'eux, qui est utilisé pour faire des demandes de GET à l'API.
Pour obtenir une liste de pistes aléatoires, nous pouvons utiliser sc.get () comme ceci:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
Voir les pistes de liste des stylos par SitePoint (@SitePoint) sur Codepen.
Ce que cela fait, c'est qu'il interroge le point de terminaison / suit et attend une fonction de rappel. La réponse est stockée dans le paramètre de réponse du rappel, qui est un tableau d'objets JavaScript avec plusieurs propriétés, le titre étant l'un d'entre eux. Nous pouvons console.log (réponse [0]) au lieu de boucler pour voir un objet entier et ses propriétés. Ensuite, nous saurons à quelles propriétés nous avons accès.
AVIS, dans cet exemple, nous n'avons pas spécifié d'URL de rappel lors de l'initialisation. En effet, ici, peu importe si nous le spécifions ou non. Quoi qu'il en soit, notre code fonctionnera. Mais lorsque nous implémenterons les fonctionnalités de la collection d'utilisateurs, cela sera important et sera nécessaire afin que personne d'autre ne puisse utiliser notre ID client.
L'objet SC propose une autre méthode, S.oembed (URL, Options, rappel), qui incorpore le lecteur SoundCloud dans notre site Web et nous permet de jouer une trace de notre choix.
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>Voir le stylo incorporer une piste de SitePoint (@SitePoint) sur Codepen.
Décomposons-le:
Cette astuce peut être utilisée pour intégrer une chanson ou une musique dans un site Web.
Pour la mise en œuvre de la fonctionnalité de la collection d'utilisateurs, nous devons avoir une URL de rappel à des fins d'autorisation. Il s'agit d'une exigence du protocole OAuth. Si vous êtes curieux à ce sujet, voici une explication simplifiée de: OAuth 2 simplifié. Alors allons-y et mettons à jour les paramètres de l'application pour inclure une URL de rappel de callback.html, que nous allons maintenant créer.
Une fois qu'un utilisateur s'est connecté, la fenêtre contextuelle redirige vers ce fichier. Dans notre cas, nous allons le nommer Callback.html et il résidera dans le même répertoire que notre page d'accueil (index.html). Ceci est le fichier que nous devons donner dans le champ de rappel dans les paramètres de nos applications.
Le code que nous devons utiliser dans le fichier de rappel est fourni dans la documentation. Cependant, la documentation est un peu obsolète, nous allons donc le modifier légèrement pour répondre aux normes modernes.
Vous pouvez modifier son message et sa conception autant que vous le souhaitez, mais pour l'instant, nous le garderons aussi simple que possible:
<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>
sc.connect (rappel) est la méthode d'implémentation de la fonctionnalité d'utilisateur-login. Il ouvre une fenêtre contextuelle, incitant l'utilisateur à se connecter à son compte SoundCloud. L'utilisation de base est comme ci-dessous:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
Un exemple légèrement plus intéressant serait:
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>Décomposons-le:
Remarquez qu'une demande à / moi renverra des données sur l'utilisateur actuellement connecté. Par conséquent, l'utiliser avant que l'utilisateur ne soit connecté entraînera un message d'erreur.
Une fois que l'utilisateur s'est connecté, il y a tellement plus que nous pouvons faire. Pour démontrer une partie de la puissance, j'ai créé un site Web de démonstration sur GitHub. Vous pouvez trouver le code source ici et le voir en action ici.
Parcourons deux des fichiers. Dans index.html, les quatre divs sont importants, car ils sont remplis de données utilisateur après que l'utilisateur s'est connecté:
<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>
Le fichier le plus important le plus important est Script.js: toute la magie se produit ici. La plupart du code nous sera familier, mais passons rapidement à travers cela:
<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span> </span>
<span>SC.initialize({
</span> <span>client_id: "CLIENT_ID",
</span> <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span><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>Il y a beaucoup plus que nous pouvons faire, comme obtenir ou mettre à jour la description de l'utilisateur, obtenir l'avatar de l'utilisateur, voir qui suit l'utilisateur et ses favoris.
interroger une API à partir du côté client est un outil puissant car il nous sauve des complexités du back-end. Le SDK facilite notre vie. Après avoir appris ses bases, nous pouvons créer des applications Web encore plus puissantes et conviviales. Voir quelques exemples de ce qui est possible et consultez la documentation officielle de SoundCloud pour en savoir plus sur les méthodes API avancées disponibles.
Je serais ravi de vous entendre sur les choses que vous avez construites (ou prévoyez de construire) avec le SoundCloud SDK. Faites-moi savoir dans les commentaires!
Pour utiliser l'API SoundCloud avec JavaScript SDK, vous devez avoir une compréhension de base de JavaScript et le fonctionnement des API. Vous devez également avoir un compte SoundCloud et une application enregistrée sur SoundCloud. L'application enregistrée vous fournira un ID client, qui est nécessaire pour faire des demandes d'API.
Pour enregistrer une application sur SoundCloud, vous devez vous connecter à votre compte SoundCloud et accéder à la section «Applications». Ici, vous pouvez créer une nouvelle application en fournissant les détails nécessaires tels que le nom de l'application, la description, le site Web et la redirection URI. Une fois l'application créée, vous recevrez un ID client.
Pour initialiser l'API SoundCloud, vous devez utiliser le SC.Initialiser la méthode et passer dans un objet avec votre ID client. Voici un exemple:
sc.Initialize ({
client_id: 'your_client_id'
});
Remplacez 'your_client_id' par l'ID client de votre application enregistrée.
Vous pouvez faire des demandes d'API à SoundCloud à l'aide de la méthode SC.get. Cette méthode prend deux paramètres: le point de terminaison et une fonction de rappel. Le point de terminaison est l'URL de la ressource API auquel vous souhaitez accéder, et la fonction de rappel est exécutée lorsque la réponse de l'API est reçue.
Quand En faisant des demandes d'API, les erreurs peuvent être gérées à l'aide de la méthode de capture. Cette méthode prend une fonction en tant que paramètre, qui est exécuté lorsqu'une erreur se produit. L'objet d'erreur est transmis à cette fonction, vous permettant de gérer l'erreur de manière appropriée.
Pour lire une piste à l'aide de l'API SoundCloud, vous, vous Besoin d'utiliser la méthode SC.stream. Cette méthode prend l'URI de la piste en tant que paramètre et renvoie un objet Stream. Vous pouvez ensuite utiliser la méthode de lecture de cet objet pour lire la piste.
Pour suspendre une piste, vous pouvez utiliser la méthode de pause sur le flux objet. Pour reprendre la piste, vous pouvez à nouveau utiliser la méthode de lecture.
Pour obtenir les détails d'une piste, vous pouvez utiliser le sc.get Méthode et passer l'URI de la piste en tant que paramètre. La réponse de l'API contiendra les détails de la piste.
Pour rechercher des pistes, vous pouvez utiliser la méthode SC.get et passer ‘/ Tracks’ comme point de terminaison. Vous pouvez également passer un paramètre de requête pour filtrer les pistes. Par exemple, pour rechercher des pistes avec le titre 'My Track', vous pouvez utiliser le code suivant:
sc.get ('/ Tracks', {Q: 'My Track'}). Puis (fonction (pistes) {
console.log (pistes);
});
Pour obtenir des pistes d'un utilisateur, vous pouvez utiliser le Méthode sc.get et pass '/ users / {user_id} / tracks' comme point de terminaison. Remplacez «{user_id}» par l'ID de l'utilisateur. La réponse API contiendra les pistes de l'utilisateur.
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!
La différence entre ancrer et viser
Découvrez les dix principales crypto-monnaies dans lesquelles il vaut la peine d'investir
Introduction aux logiciels de modélisation paramétrique
Comment résoudre l'erreur d'analyse syntaxique
Que faire si notepad.exe ne répond pas
Que signifie formater un téléphone mobile ?
Comment ouvrir le fichier dmp
Comment utiliser la fonction de tri
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
