97人人模人人爽人人喊网,高清日韩av,,成人免费无码大片a毛片抽搐色欲

鑰匙要點

>常見問題（常見問題解答）關(guān)于將SoundCloud API與Jav??aScript SDK

>將SoundCloud API與Jav??aScript SDK使用SoundCloud API的先決條件是什么？您還需要在SoundCloud上擁有一個SoundCloud帳戶和注冊應(yīng)用程序。注冊的應(yīng)用程序?qū)槟峁┛蛻鬒D，這是提出API請求的必要條件。

client_id：'your_client_id'

>如何使用SoundCloud API播放曲目嗎？需要使用sc.stream方法。此方法將曲目的URI作為參數(shù)并返回流對象。然后，您可以使用此對象上的播放方法播放曲目。

>如何搜索曲目？

首頁

web前端

js教程

將SoundCloud API與Jav??aScript SDK一起使用

Christopher Nolan

Feb 18, 2025 am 11:20 AM

將SoundCloud API與Jav??aScript SDK一起使用

鑰匙要點

允許開發(fā)人員訪問所需的所有數(shù)據(jù)。 API是一個URL集合，可從SoundCloud服務(wù)器中訪問數(shù)據(jù)，而SDK（軟件開發(fā)套件）是用于查詢API的預(yù)先編寫的庫。 SDK有兩個版本。它們之間的主要區(qū)別是，當(dāng)對API提出異步請求時，它們?nèi)绾畏祷財?shù)據(jù)。最新版本返回承諾，而另一個則需要回調(diào)函數(shù)作為參數(shù)。
>要使用JavaScript開始查詢SoundCloud API，需要下載由SoundCloud提供的JavaScript SDK。對于用戶蛋白功能，建議使用較舊的SDK版本，因為它更穩(wěn)定。可以使用簡單的GET請求訪問SoundCloud API的
>本文由杰米·希爾茲（Jamie Shields）和韋恩·安克塔（Wern Ancheta）進(jìn)行了同行評審。感謝SitePoint所有的同行評審員制作SitePoint內(nèi)容的最佳功能！ SoundCloud提供了一個API，該API允許開發(fā)人員獲得所需的所有數(shù)據(jù)。但是它的用法可能會令人困惑，尤其是對于初學(xué)者而言，因為到目前為止，SoundCloud API文檔和示例使用了不同版本的SDK（軟件開發(fā)套件）。
在本教程中，我們將學(xué)習(xí)如何訪問SoundCloud API以及如何使用SDK簡化過程。我們將走路設(shè)置SDK，然后編寫JavaScript以獲取數(shù)據(jù)，從SoundCloud播放音頻以及更多。

入門知道HTTP和API的概念和工作將會有所幫助。如果您想了解有關(guān)API的更多信息，我推薦此簡短課程：API介紹。對異步JavaScript，承諾和回調(diào)的一點了解也將有所幫助。我們的代碼示例中使用了jQuery，因此知道基本知識不會受到傷害。

>要使用JavaScript開始查詢SoundCloud API，我們需要下載SoundCloud提供的JavaScript SDK。如前所述，可用的SDK有兩個不同的版本。

使用哪個版本的SDK？

>它們之間的主要區(qū)別是，當(dāng)對API提出異步請求時，它們?nèi)绾畏祷財?shù)據(jù)。最新版本返回承諾，而另一個則需要回調(diào)函數(shù)作為參數(shù)。

> 我注意到的一個問題是，對于文檔使用的SDK版本，用戶login功能似乎存在問題，因為彈出窗口不會自動關(guān)閉。因此，為了簡單起見，由于它更穩(wěn)定，因此我們將在本教程中的示例中使用舊版本。此版本將需要異步請求的回調(diào)函數(shù)。

使用SoundCloud API

設(shè)置基本的HTML文檔

>我們將創(chuàng)建一個基本的HTML頁面，該頁面將作為我們的主頁。我們還將在此處包含SDK，以便我們可以利用其功能。

>

請注意，我們已直接從SoundCloud的服務(wù)器中包含了SDK。您還可以下載SDK并引用它：

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

測試SDK是否正確加載到您的網(wǎng)頁中：>

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

>在瀏覽器中打開頁面（推薦Chrome）。>

>在瀏覽器中打開開發(fā)人員控制臺（

ctrl shift j

在控制臺，鍵入SC并按Enter。 SC是由SDK創(chuàng)建的JavaScript對象
如果出現(xiàn)未定義的錯誤，則該錯誤未正確加載。嘗試刷新并確保通往SDK文件（SDK.JS）的路徑正確。 注冊SoundCloud應(yīng)用
>注冊SoundCloud應(yīng)用程序，您需要的只是一個SoundCloud帳戶。如果您還沒有一個，請繼續(xù)創(chuàng)建一個。通過注冊應(yīng)用程序，SoundCloud服務(wù)器將能夠驗證我們的請求，因此沒有其他人可以代表我們提出請求。> >

打開SoundCloud應(yīng)用程序頁面。在這里，我們已經(jīng)創(chuàng)建的任何應(yīng)用程序都將被列出。確保您已登錄到SoundCloud帳戶。

注意：您無需為此目的創(chuàng)建一個單獨的帳戶。您可以使用用于個人目的的相同帳戶。

> >

單擊

按鈕。
>單擊“大
登記>”按鈕，以完成應(yīng)用程序注冊。

>成功注冊后，我們將被重定向到新創(chuàng)建的應(yīng)用程序的設(shè)置頁面。在那里，我們將找到我們的應(yīng)用程序的client id ，該應(yīng)用程序?qū)⒂糜谑跈?quán)我們的請求。我們可以暫時離開>網(wǎng)站和回調(diào)字段。我們稍后再解決。>

>初始化客戶端

通過“初始化客戶端”，我們的意思是讓客戶準(zhǔn)備在自身和SoundCloud API之間交換數(shù)據(jù)。我們可以在我們之前創(chuàng)建的基本HTML文檔中或在外部

.js文件中進(jìn)行此操作。 javascript語法是：

讓我們分解：

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

> client_id是在我們注冊應(yīng)用程序時向我們提供的。

callback_url是callback.html的URL，這是一個html文件，在用戶登錄后被調(diào)用。我們將盡快創(chuàng)建它。>
現(xiàn)在，初始化后，我們準(zhǔn)備查詢SoundCloud API。讓我們看看一些我們已經(jīng)可以做的示例。

>示例

如果我們打開瀏覽器控制臺和類型SC。，將出現(xiàn)與SC對象關(guān)聯(lián)的方法的列表。 sc.get（uri，callback）是其中之一，用于向API提出請求。

獲取曲目列表

要獲取隨機(jī)曲目列表，我們可以使用SC.Get（）這樣：

>

>請參閱codepen上的sitepoint（@sitepoint）的筆列表。

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

>它的作用是，它查詢 /跟蹤端點并期望回調(diào)函數(shù)。響應(yīng)存儲在回調(diào)的響應(yīng)參數(shù)中，該回答參數(shù)是具有多個屬性的JavaScript對象的數(shù)組，標(biāo)題是其中之一。我們可以console.log（響應(yīng)[0]），而不是循環(huán)查看整個對象及其屬性。然后，我們將知道我們可以訪問哪些屬性。

>注意，在此示例中，我們尚未在初始化期間指定回調(diào)URL。這是因為在這里我們是否指定它并不重要。無論哪種方式，我們的代碼都可以正常工作。但是，當(dāng)我們實現(xiàn)用戶login功能時，它將很重要，因此沒有人可以使用我們的客戶端ID。

嵌入軌道

SC對象提供另一種方法，SC.Oembed（URL，選項，回調(diào)），該方法將SoundCloud播放器嵌入我們的網(wǎng)站中并允許我們播放我們選擇的跟蹤。

請參閱codepen上的sitepoint（@sitepoint）嵌入軌道的筆

讓我們分解：

首先，我們給它一個我們想要播放的曲目的完整URL。在選項參數(shù)中，我們?yōu)椴シ牌髟O(shè)置了一些選項。在這里查看更多。

這個技巧可用于在網(wǎng)站中嵌入歌曲或音樂。

實現(xiàn)用戶登錄

為了實現(xiàn)用戶蛋白功能，我們需要具有授權(quán)目的的回調(diào)URL。這是OAuth協(xié)議的要求。如果您對此感到好奇，這是一個簡化的解釋：OAuth 2簡化。因此，讓我們繼續(xù)更新應(yīng)用程序設(shè)置，以包括CALLBACK.HTML的回調(diào)URL，我們現(xiàn)在將要創(chuàng)建。

創(chuàng)建回調(diào)頁

用戶登錄后，彈出窗口將其重定向到此文件。在我們的情況下，我們將其命名為callback.html，它將駐留在與主頁（index.html）同一目錄中。這是我們需要在應(yīng)用程序設(shè)置中的回調(diào)字段中給出的文件。

文檔中提供了我們需要在回調(diào)文件中使用的代碼。但是，該文檔有些過時，因此我們將稍微修改以符合現(xiàn)代標(biāo)準(zhǔn)。

>您可以按照自己的意愿修改其消息和設(shè)計，但是就目前而言，我們將盡可能簡單地進(jìn)行簡單：

將SoundCloud API與Jav??aScript SDK一起使用

在

中記錄用戶

sc.connect（回調(diào)）是實現(xiàn)用戶login功能的方法。它打開一個彈出窗口，提示用戶登錄到其SoundCloud帳戶?；居梅ㄈ缦拢?p>

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

一個更有趣的例子是：

>

讓我們分解：

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

>用戶登錄后，他們將被重定向到callback.html，我們之前創(chuàng)建了。

然后，彈出窗口將自動關(guān)閉，因為我們可以通過在callback.html中讀取代碼

<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>

來猜測。

之后，我們的回調(diào)函數(shù)將被調(diào)用，在該函數(shù)中，使用sc.get（）method。

>一旦完成請求完成，其回調(diào)函數(shù)將執(zhí)行并登錄到控制臺。>

請注意，請求 /我將返回有關(guān)當(dāng)前登錄用戶的數(shù)據(jù)。因此，在登錄用戶之前使用它將導(dǎo)致錯誤消息。
>使用用戶的數(shù)據(jù)
>用戶登錄后，我們可以做更多的事情。為了演示一些力量，我在Github上創(chuàng)建了一個演示網(wǎng)站。您可以在此處找到源代碼，并在此處查看它。
>讓我們?yōu)g覽兩個文件。在index.html中，這四個DIV非常重要，因為用戶登錄后，它們會填寫用戶數(shù)據(jù)：
>
```
<!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：所有魔術(shù)都發(fā)生在這里。大多數(shù)代碼對我們來說都是熟悉的，但是讓我們快速瀏覽它：
```
<script src="sdk.js"></script>

```
- >
```
SC.initialize({
 client_id: "CLIENT_ID",
 redirect_uri: "CALLBACK_URL"
});

```
然后，我們將單擊事件處理程序連接到#Login按鈕。單擊時，將執(zhí)行sc.connect（回調(diào)），該窗口打開彈出窗口，提示用戶登錄。用戶登錄彈出窗口后，
- > functions setui（），getTracks（）和getPlayLists（），設(shè)置UI，列出用戶的曲目并分別列出用戶的播放列表。這些函數(shù)在同一文件中定義。
>
```
SC.get("/tracks", function(response) {
 for (var i = 0; i < response.length; i++) {
 $("ul").append("<li>" + response[i].title + "</li>");
 }
});

```
- 摘要
如果要使用用戶 - login功能，請使用舊版本的SDK版本。它是穩(wěn)定的，并且使用回調(diào)函數(shù)返回數(shù)據(jù)。
>
如果未使用用戶蛋白功能，則可以使用較新的SDK版本。它使用承諾返回數(shù)據(jù)。
SoundCloud API的數(shù)據(jù)可以通過簡單的獲取請求訪問。> 可以使用 /ME端點獲得
>用戶特定的數(shù)據(jù)，但是只有使用SoundCloud帳戶將用戶登錄到我們的網(wǎng)站時。
- >我很想聽聽您使用SoundCloud SDK構(gòu)建（或計劃構(gòu)建）的內(nèi)容。在評論中讓我知道！