99久久国产综合精品麻豆,gay片男同网站www,成人欧美一区二区三区视频

鑰匙要點

>常見問題（常見問題解答）關於將SoundCloud API與Jav??aScript SDK

>將SoundCloud API與Jav??aScript SDK使用SoundCloud API的先決條件是什麼？您還需要在SoundCloud上擁有一個SoundCloud帳戶和註冊應用程序。註冊的應用程序將為您提供客戶ID，這是提出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服務器中訪問數(shù)據(jù)，而SDK（軟件開發(fā)套件）是用於查詢API的預先編寫的庫。 SDK有兩個版本。它們之間的主要區(qū)別是，當對API提出異步請求時，它們如何返回數(shù)據(jù)。最新版本返回承諾，而另一個則需要回調函數(shù)作為參數(shù)。
>要使用JavaScript開始查詢SoundCloud API，需要下載由SoundCloud提供的JavaScript SDK。對於用戶蛋白功能，建議使用較舊的SDK版本，因為它更穩(wěn)定。可以使用簡單的GET請求訪問SoundCloud API的
>本文由傑米·希爾茲（Jamie Shields）和韋恩·安克塔（Wern Ancheta）進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳功能！ SoundCloud提供了一個API，該API允許開發(fā)人員獲得所需的所有數(shù)據(jù)。但是它的用法可能會令人困惑，尤其是對於初學者而言，因為到目前為止，SoundCloud API文檔和示例使用了不同版本的SDK（軟件開發(fā)套件）。
在本教程中，我們將學習如何訪問SoundCloud API以及如何使用SDK簡化過程。我們將走路設置SDK，然後編寫JavaScript以獲取數(shù)據(jù)，從SoundCloud播放音頻以及更多。

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

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

使用哪個版本的SDK？

>它們之間的主要區(qū)別是，當對API提出異步請求時，它們如何返回數(shù)據(jù)。最新版本返回承諾，而另一個則需要回調函數(shù)作為參數(shù)。

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

使用SoundCloud API

設置基本的HTML文檔

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

>

請注意，我們已直接從SoundCloud的服務器中包含了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應用
>註冊SoundCloud應用程序，您需要的只是一個SoundCloud帳戶。如果您還沒有一個，請繼續(xù)創(chuàng)建一個。通過註冊應用程序，SoundCloud服務器將能夠驗證我們的請求，因此沒有其他人可以代表我們提出請求。 > >

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

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

> >

單擊

按鈕。
>單擊“大
登記>”按鈕，以完成應用程序註冊。

>成功註冊後，我們將被重定向到新創(chuàng)建的應用程序的設置頁面。在那裡，我們將找到我們的應用程序的client id ，該應用程序將用於授權我們的請求。我們可以暫時離開>網(wǎng)站和回調字段。我們稍後再解決。 >

>初始化客戶端

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

.js文件中進行此操作。 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是在我們註冊應用程序時向我們提供的。

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

>示例

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

獲取曲目列表

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

>

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

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

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

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

嵌入軌道

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

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

讓我們分解：

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

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

實現(xiàn)用戶登錄

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

創(chuàng)建回調頁

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

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

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

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

在

中記錄用戶

sc.connect（回調）是實現(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)建了。

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

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

來猜測。

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

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

請注意，請求 /我將返回有關當前登錄用戶的數(shù)據(jù)。因此，在登錄用戶之前使用它將導致錯誤消息。
>使用用戶的數(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：所有魔術都發(fā)生在這裡。大多數(shù)代碼對我們來說都是熟悉的，但是讓我們快速瀏覽它：
```
<script src="sdk.js"></script>

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

```
然後，我們將單擊事件處理程序連接到#Login按鈕。單擊時，將執(zhí)行sc.connect（回調），該窗口打開彈出窗口，提示用戶登錄。用戶登錄彈出窗口後，
- > functions setui（），getTracks（）和getPlayLists（），設置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)定的，並且使用回調函數(shù)返回數(shù)據(jù)。
>
如果未使用用戶蛋白功能，則可以使用較新的SDK版本。它使用承諾返回數(shù)據(jù)。
SoundCloud API的數(shù)據(jù)可以通過簡單的獲取請求訪問。 > 可以使用 /ME端點獲得
>用戶特定的數(shù)據(jù)，但是只有使用SoundCloud帳戶將用戶登錄到我們的網(wǎng)站時。
- >我很想聽聽您使用SoundCloud SDK構建（或計劃構建）的內容。在評論中讓我知道！