JavaScript SDKでSoundCloud APIを使用します-jsチュートリアル-php.cn

JavaScript SDKでSoundCloud APIを使用します

キーテイクアウト

SoundCloud APIを使用すると、開発者は必要なほぼすべてのデータにアクセスできます。 APIは、SoundCloudサーバーからのデータへのアクセスを提供するURLのコレクションであり、SDK（ソフトウェア開発キット）は、APIを照会するための事前に書かれたライブラリです。
JavaScriptを使用してSoundCloud APIのクエリを開始するには、SoundCloudが提供するJavaScript SDKをダウンロードする必要があります。ユーザーロジン機能の場合、SDKの古いバージョンがより安定しているため推奨されます。 SoundCloud APIのデータには、簡単なGetリクエストでアクセスできます。 /meエンドポイントを使用してユーザー固有のデータを取得できますが、ユーザーがSoundCloudアカウントを使用してWebサイトにログインした場合のみです。クライアント側からAPIを照会すると、開発者をバックエンドの複雑さから救うことができます。 SDKはプロセスを簡素化し、より強力で使いやすいWebアプリケーションの作成を可能にします。
この記事は、ジェイミーシールズとウェルンアンチェータによって査読されました。 SetePointコンテンツを最高にしてくれたSitePointのすべてのピアレビュアーに感謝します！SoundCloudは、開発者が必要なほぼすべてのデータを取得できるAPIを利用可能にしました。しかし、その使用は、特に初心者にとっては混乱する可能性があります。今のところ、SoundCloud APIドキュメントと例では、SDK（ソフトウェア開発キット）の異なるバージョンを使用しているためです。
APIとSDKの違いは何ですか？基本的に、APIはSoundCloudサーバーからのデータへのアクセスを提供するURLのコレクションであり、SDKはAPIを照会するための事前に記述されたライブラリ（またはクライアント）です。詳細については、この議論を参照してください。
始めましょう

HTTPとAPIの概念と仕組みを知ることが役立ちます。 APIについて詳しく知りたい場合は、この短いコース：APIの紹介をお勧めします。非同期JavaScript、約束、コールバックに関する少しの知識も役立ちます。 jQueryはコードの例で使用されているため、基本を知ることは傷つかない。 JavaScriptを使用してSoundCloud APIのクエリを開始するには、SoundCloudが提供するJavaScript SDKをダウンロードする必要があります。前述のように、利用可能なSDKには2つの異なるバージョンがあります。
使用するsdkのバージョン

それらの間の主な違いは、APIに対して非同期リクエストが行われたときのデータを返す方法です。最新バージョンは約束を返し、もう1つはパラメーターとしてコールバック関数を必要とします。
私が気づいた問題の1つは、ドキュメントで使用されているSDKのバージョンでは、ポップアップウィンドウが自動的に閉じないため、ユーザーロジン機能に問題があるように見えることです。
だから、簡単にするために、そしてそれがより安定しているため、このチュートリアル全体の例で古いバージョンを使用します。このバージョンでは、非同期リクエストのコールバック関数が必要です SoundCloud APIを使用して

基本的なHTMLドキュメントをセットアップ

ホームページとして機能する基本的なHTMLページを作成します。また、ここにSDKを含めて、その機能を利用できるようにします。

SoundCloudのサーバーから直接ページにSDKを含めたことに注意してください。 SDKをダウンロードして、次のように参照することもできます。

<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ブラウザでページを開きます（Chrome推奨）
ブラウザで開発者コンソールを開きます（
<script src="sdk.js"></script> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ctrl Shift J
、Chrome）。
コンソールでは、SCを入力し、Enterを押します。 scは
javascriptオブジェクト
sdkによって作成されたものです。

未定義のエラーが表示された場合、正しくロードされていません。リフレッシュしてみて、SDKファイル（SDK.JS）へのパスが正しいことを確認してください。
SoundCloudアプリを登録するには、必要なのはSoundCloudアカウントだけです。まだ持っていない場合は、先に進んで作成してください。アプリを登録することにより、SoundCloudサーバーはリクエストを確認できるため、他の誰も当社に代わってリクエストを行うことができません。
注：ウェブサイトでユーザーロジン機能を使用しない場合は、この手順をスキップできます。次のセクションで説明します

SoundCloudアプリページを開きます。ここでは、既に作成したアプリがリストされます。 SoundCloudアカウントにログインしていることを確認してください。
注：この目的のために別のアカウントを作成する必要はありません。個人的な目的で使用するのと同じアカウントを使用できます。

[
]をクリックして、新しいアプリケーション
ボタンを登録します。

チェックボックスをチェックして、名前を付けてSoundCloudの開発者ポリシーを受け入れます。

[ビッグ
登録]ボタンをクリックして、アプリの登録を完了します。

登録に正常に登録した後、新しく作成されたアプリの設定ページにリダイレクトされます。そこでは、アプリのクライアントID を見つけます。これは、リクエストを承認するために使用されます。今のところ、Webサイトおよびcallbackフィールドを離れることができます。後で説明します。

クライアントを初期化

「クライアントの初期化」により、クライアントがそれ自体とSoundCloud APIの間でデータを交換できるようにすることを意味します。以前に作成した基本的なHTMLドキュメントまたは外部.jsファイルでそれを行うことができます。
JavaScriptの構文は次のとおりです

それを分解しましょう：
<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

アプリを登録するときにclient_idが提供されます。
callback_urlは、ユーザーがログインした後に呼び出されるHTMLファイルであるcallback.htmlへのURLです。すぐに作成します。

今、初期化の後、SoundCloud APIを照会する準備ができています。すでにできることの例を見てみましょう。
例

ブラウザコンソールとタイプSCを開くと、SCオブジェクトに関連付けられたメソッドのリストが表示されます。 sc.get（uri、callback）はその1つであり、APIへのGet Requestsを作成するために使用されます。トラックのリストを取得
ランダムトラックのリストを取得するには、このようなsc.get（）を使用できます。

CodepenのSitePoint（@SitePoint）のペンリストトラックを参照してください。
これが行うことは、 /tracks endpointを照会し、コールバック関数を期待することです。応答は、複数のプロパティを持つJavaScriptオブジェクトの配列であるコールバックの応答パラメーターに保存されます。タイトルはその1つです。ループする代わりに、オブジェクト全体とそのプロパティを確認する代わりに、console.log（response [0]）をConsole.log（応答[0]））できます。次に、どのプロパティにアクセスできるかがわかります。
通知、この例では、初期化中にコールバックURLを指定していません。これは、ここで指定しているかどうかは問題ではないからです。いずれにせよ、私たちのコードは機能します。ただし、ユーザーロジン機能を実装する場合、それは重要であり、必要になります。トラックを埋め込む

SCオブジェクトは、SC.OEMBED（URL、Options、CallBack）の別の方法を提供します。

<script src="sdk.js"></script> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
codepenにSitePoint（@SitePoint）でトラックを埋め込んでいるペンを参照してください。
それを分解しましょう：

最初に、プレイしたいトラックの完全なURLを提供します。

オプションパラメーターでは、プレーヤーにいくつかのオプションを設定します。詳細はこちらをご覧ください。

コールバック関数では、ページの要素（#Player）の内容を、プレーヤーのHTMLコード（res.html）に置き換えます。

このトリックは、ウェブサイトに歌や音楽を埋め込むために使用できます。

ユーザーログインの実装

ユーザーロジン機能を実装するには、承認目的でコールバックURLが必要です。これは、OAuthプロトコルの要件です。あなたがそれについて興味を持っているなら、ここに簡単な説明があります：Oauth 2が簡素化されました。それでは、アプリの設定を更新して、Callback.htmlのコールバックURLを含めるようにしましょう。これを作成します。
コールバックページを作成

ユーザーがログインした後、ポップアップウィンドウがこのファイルにリダイレクトされます。私たちの場合、callback.htmlという名前を付けると、ホームページ（index.html）と同じディレクトリに存在します。これは、アプリ設定のコールバックフィールドで指定する必要があるファイルです。

コールバックファイル内で使用する必要があるコードは、ドキュメントで提供されています。ただし、ドキュメントは少し古いものであるため、最新の基準を満たすために少し変更します。
あなたが望むだけのメッセージとデザインを変更できますが、今のところ、私たちはそれを可能な限りシンプルに保ちます：

でユーザーをログに記録します
<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
SC.Connect（コールバック）は、ユーザーロジン機能を実装する方法です。ポップアップウィンドウが開き、ユーザーにSoundCloudアカウントにログインするようになります。基本的な使用法は次のとおりです

もう少し興味深い例は、
です

<script src="sdk.js"></script> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
それを分解しましょう：

SC.initialize({ client_id: "CLIENT_ID", redirect_uri: "CALLBACK_URL" }); 
ログイン後にコピー
ログイン後にコピー
ユーザーがログインした後、それらはCallback.htmlにリダイレクトされ、以前に作成しました。 Callback.htmlのコードを読むことで推測できるため、ポップアップウィンドウが自動的に閉じます。その後、コールバック関数が呼び出されます。ここでは、sc.get（）メソッドを使用してendpointへのget requestが行われます。
GETリクエストが完了するとすぐに、コールバック関数が実行され、ウェルカムメッセージがコンソールにログに記録されます。

/meへのリクエストは、現在ログインしているユーザーに関するデータを返していることに注意してください。したがって、ユーザーがログインする前にそれを使用すると、エラーメッセージが表示されます。
ユーザーのデータで再生

ユーザーがログインしたら、さらに多くのことができることがあります。いくつかのパワーを示すために、GitHubでデモWebサイトを作成しました。ソースコードはこちらで動作しているのを見ることができます。

2つのファイルを通り抜けましょう。 index.htmlでは、ユーザーがログインした後にユーザーデータに記入されるため、4つのdivが重要です。
<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

次に重要なファイルはscript.jsです。すべての魔法がここで起こります。ほとんどのコードは私たちに馴染みがありますが、すぐにそれを歩きましょう：

<script src="sdk.js"></script> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

最初にアプリを初期化します。今回は、callback.htmlページとして指定されているRedirect_uriがあります。このURLまたはURIは、アプリ設定で指定したURLと正確に一致する必要があります。

SC.initialize({ client_id: "CLIENT_ID", redirect_uri: "CALLBACK_URL" }); 
ログイン後にコピー
ログイン後にコピー

次に、クリックイベントハンドラーを#Loginボタンに添付します。クリックすると、ユーザーがログインするように促すポップアップウィンドウを開くSC.Connect（コールバック）を実行します。
ユーザーがログインした後、ポップアップウィンドウが閉じます。次に、sc.connect（）のコールバック関数が実行されます。コールバック関数内で、現在ログインしているユーザーのオブジェクトを返す /meエンドポイントにget requestを作成します。行ったGetリクエストのコールバックでは、ユーザーのパーマリンクを変数user_permaに保存します。これはグローバルスコープで定義されているため、後で使用できます。

トラックまたはプレイリスト名がクリックされると、play（）関数が実行されます。これは、そのトラックまたはプレイリストに対してsc.oembed（）メソッドを使用してページにオーディオプレーヤーを埋め込みます。

SC.get("/tracks", function(response) { for (var i = 0; i < response.length; i++) { $("ul").append("<li>" + response[i].title + "</li>"); } }); 
ログイン後にコピー
ユーザーの説明の取得や更新、ユーザーのアバターの取得、ユーザーが誰をフォローしているか、お気に入りを確認するなど、できることはさらにありません。
要約

ユーザーロジン機能を使用する場合は、
SDKの古いバージョンを使用します。安定しており、コールバック関数を使用してデータが返されます。
ユーザーロジン機能を使用していない場合、SDKの新しいバージョンを使用できます。データを返すことを約束します SoundCloud APIのデータには、簡単なGet Requestによってアクセスできます。
ユーザー固有のデータは、 /meエンドポイントを使用して取得できますが、ユーザーがSoundCloudアカウントを使用してWebサイトにログインした場合のみです。
クライアント側からAPIをクエリすることは、バックエンドの複雑さから私たちを救うため、強力なツールです。 SDKは私たちの生活をずっと楽にします。その基本を学んだ後、さらに強力でユーザーフレンドリーなWebアプリケーションを作成できます。何が可能かの例をいくつか見て、公式のSoundCloudドキュメントをチェックして、利用可能な高度なAPIメソッドの詳細をご覧ください。
SoundCloud SDKであなたが構築した（または構築する予定の）ことについてあなたから聞いてみたいです。コメントでお知らせください！
JavaScript sdk
でsoundcloud APIを使用することについて、よくある質問（FAQ）
JavaScript SDKでSoundCloud APIを使用するには、JavaScriptとAPIの仕組みを基本的に理解する必要があります。また、SoundCloudアカウントとSoundCloudに登録されたアプリケーションが必要です。登録されたアプリケーションは、APIリクエストを作成するために必要なクライアントIDを提供します。 SoundCloudでは、SoundCloudアカウントにログインして、「アプリ」セクションに移動する必要があります。ここでは、アプリケーション名、説明、ウェブサイト、リダイレクトURIなどの必要な詳細を提供することにより、新しいアプリケーションを作成できます。アプリケーションが作成されたら、クライアントIDが提供されます。

クライアントIDでSoundCloud APIを初期化するにはどうすればよいですか？ sc.InitializeメソッドとクライアントIDを使用してオブジェクトを渡します。例は次のとおりです。

sc.Initialize（{ client_id：your_client_id '
}）;
登録アプリケーションのクライアントIDを' your_client_id 'に置き換えます。 >
soundCloudにAPIリクエストを作成するにはどうすればよいですか？

sc.getメソッドを使用してsoundcloudにAPIリクエストを作成できます。この方法では、エンドポイントとコールバック関数の2つのパラメーターが必要です。エンドポイントは、アクセスするAPIリソースのURLであり、API応答が受信されたときにコールバック関数が実行されます。APIリクエストを作成するときにエラーを処理するにはどうすればよいですか？ APIリクエストを作成すると、CATCHメソッドを使用してエラーを処理できます。この方法は、エラーが発生したときに実行されるパラメーターとして関数を取ります。エラーオブジェクトがこの関数に渡され、エラーを適切に処理できるようにします。

SoundCloud APIを使用してトラックを再生するにはどうすればよいですか？ Sc.Streamメソッドを使用する必要があります。この方法では、トラックのURIをパラメーターとして使用し、ストリームオブジェクトを返します。その後、このオブジェクトの再生方法を使用してトラックを再生できます。

トラックを一時停止して再開するにはどうすればよいですか？物体。トラックを再開するには、再びプレイ方法を使用できます。

トラックの詳細を取得するにはどうすればよいですか？

トラックの詳細を取得するには、sc.getを使用できます。メソッドとトラックのURIをパラメーターとして渡します。 API応答には、トラックの詳細が含まれます
トラックを検索するにはどうすればよいですか？

トラックを検索するには、sc.getメソッドを使用し、「/トラック」をエンドポイントとして渡すことができます。クエリパラメーターを渡してトラックをフィルタリングすることもできます。たとえば、「マイトラック」というタイトルでトラックを検索するには、次のコードを使用できます。（トラック）{}）;

ユーザーのトラックを取得するにはどうすればよいですか？
ユーザーのトラックを取得するには、 sc.getメソッドとパス '/users/{user_id}/tracks'はエンドポイントとして。「{user_id}」をユーザーのIDに置き換えます。 API応答には、ユーザーのトラックが含まれます

以上がJavaScript SDKでSoundCloud APIを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。