搜尋

首頁 >web前端 >js教程 >將SoundCloud API與Jav​​aScript SDK一起使用

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

Christopher Nolan
Christopher Nolan原創
2025-02-18 11:20:10376瀏覽

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

鑰匙要點

    SoundCloud API
  • 允許開發人員訪問所需的所有數據。 API是一個URL集合，可從SoundCloud服務器中訪問數據，而SDK（軟件開發套件）是用於查詢API的預先編寫的庫。 SDK有兩個版本。它們之間的主要區別是，當對API提出異步請求時，它們如何返回數據。最新版本返回承諾，而另一個則需要回調函數作為參數。
    • >
  • >要使用JavaScript開始查詢SoundCloud API，需要下載由SoundCloud提供的JavaScript SDK。對於用戶蛋白功能，建議使用較舊的SDK版本，因為它更穩定。 可以使用簡單的GET請求訪問SoundCloud API的
    • >數據。可以使用 /ME端點獲得特定於用戶的數據，但前提 從客戶端查詢API可以從後端的複雜性中保存開發人員。 SDK簡化了該過程，從而創建了更強大和用戶友好的Web應用程序。
  • >本文由傑米·希爾茲（Jamie Shields）和韋恩·安克塔（Wern Ancheta）進行了同行評審。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳功能！ SoundCloud提供了一個API，該API允許開發人員獲得所需的所有數據。但是它的用法可能會令人困惑，尤其是對於初學者而言，因為到目前為止，SoundCloud API文檔和示例使用了不同版本的SDK（軟件開發套件）。
    • > API和SDK有什麼區別？基本上，API是一個URL集合，可從SoundCloud服務器中訪問數據，而SDK是用於查詢API的預先編寫的庫（或客戶端）。要了解更多信息，請參閱此討論。
  • 在本教程中，我們將學習如何訪問SoundCloud API以及如何使用SDK簡化過程。我們將走路設置SDK，然後編寫JavaScript以獲取數據，從SoundCloud播放音頻以及更多。
    • >
入門 知道HTTP和API的概念和工作將會有所幫助。如果您想了解有關API的更多信息，我推薦此簡短課程：API介紹。對異步JavaScript，承諾和回調的一點了解也將有所幫助。我們的代碼示例中使用了jQuery，因此知道基本知識不會受到傷害。

>

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

>

使用哪個版本的SDK？

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

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

>

使用SoundCloud API

設置基本的HTML文檔

>我們將創建一個基本的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是否正確加載到您的網頁中：> 

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
>在瀏覽器中打開頁面（推薦Chrome）。 >

>在瀏覽器中打開開發人員控制台（

ctrl shift j
    ，在chrome中）。
  • 在控制台，鍵入SC並按Enter。 SC是由SDK創建的JavaScript對象
    • JavaScript對象。
  • 如果出現未定義的錯誤，則該錯誤未正確加載。嘗試刷新並確保通往SDK文件（SDK.JS）的路徑正確。 註冊SoundCloud應用
  • >註冊SoundCloud應用程序，您需要的只是一個SoundCloud帳戶。如果您還沒有一個，請繼續創建一個。通過註冊應用程序，SoundCloud服務器將能夠驗證我們的請求，因此沒有其他人可以代表我們提出請求。 > >
    • 注意：如果我們不打算在我們的網站中使用用戶 - login功能，我們可以跳過此步驟。它將在下一部分中進行解釋。

>

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

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

> >

單擊
    >註冊一個新的應用程序
  • 按鈕。

    • >給它一個名字，並通過選中復選框來接受SoundCloud的開發人員策略。

  • >將SoundCloud API與Jav​​aScript SDK一起使用單擊“大

    登記>”按鈕，以完成應用程序註冊。
    • >

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

>初始化客戶端

通過“初始化客戶端”，我們的意思是讓客戶準備在自身和SoundCloud API之間交換數據。我們可以在我們之前創建的基本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文件，在用戶登錄後被調用。我們將盡快創建它。 >
  • 現在，初始化後，我們準備查詢SoundCloud API。讓我們看看一些我們已經可以做的示例。
    • >
>示例

如果我們打開瀏覽器控制台和類型SC。 ，將出現與SC對象關聯的方法的列表。 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>
>它的作用是，它查詢 /跟踪端點並期望回調函數。響應存儲在回調的響應參數中，該回答參數是具有多個屬性的JavaScript對象的數組，標題是其中之一。我們可以console.log（響應[0]），而不是循環查看整個對象及其屬性。然後，我們將知道我們可以訪問哪些屬性。

>

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

嵌入軌道

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

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

讓我們分解：

  • 首先，我們給它一個我們想要播放的曲目的完整URL。 在選項參數中，我們為播放器設置了一些選項。在這裡查看更多。
    • 在回調函數中，我們用播放器的HTML代碼（res.html）替換了頁面中元素的內容（#player）。 >
    • 這個技巧可用於在網站中嵌入歌曲或音樂。
  • >
    • 實現用戶登錄
為了實現用戶蛋白功能，我們需要具有授權目的的回調URL。這是OAuth協議的要求。如果您對此感到好奇，這是一個簡化的解釋：OAuth 2簡化。因此，讓我們繼續更新應用程序設置，以包括CALLBACK.HTML的回調URL，我們現在將要創建。

>

創建回調頁

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

>

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

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

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

在

中記錄用戶

sc.connect（回調）是實現用戶login功能的方法。它打開一個彈出窗口，提示用戶登錄到其SoundCloud帳戶。基本用法如下：

<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，我們之前創建了。

然後，彈出窗口將自動關閉，因為我們可以通過在callback.html中讀取代碼
<span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
來猜測。

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

>一旦完成請求完成，其回調函數將執行並登錄到控制台。 >
  • 請注意，請求 /我將返回有關當前登錄用戶的數據。因此，在登錄用戶之前使用它將導致錯誤消息。
    • >
  • >使用用戶的數據
  • >用戶登錄後，我們可以做更多的事情。為了演示一些力量，我在Github上創建了一個演示網站。您可以在此處找到源代碼，並在此處查看它。
    • >
  • >讓我們瀏覽兩個文件。在index.html中，這四個DIV非常重要，因為用戶登錄後，它們會填寫用戶數據：>
    <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>

    >下一個最重要的文件是script.js：所有魔術都發生在這裡。大多數代碼對我們來說都是熟悉的，但是讓我們快速瀏覽它： 

    <span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>
      首先，我們初始化我們的應用程序。請注意，這次我們將Redirect_uri指定為我們的callback.html頁面。此URL或URI應與我們在應用程序設置中指定的URL完全匹配。
    • > 
    <span>SC.initialize({
</span>  <span>client_id: "CLIENT_ID",
</span>  <span>redirect_uri: "CALLBACK_URL"
</span><span>});
</span>
    然後，我們將單擊事件處理程序連接到#Login按鈕。單擊時，將執行sc.connect（回調），該窗口打開彈出窗口，提示用戶登錄。 用戶登錄彈出窗口後，
      >關閉。然後執行sc.connect（）的回調函數。在回調功能中，我們向 /ME端點提出了一個get請求，該請求返回當前登錄用戶的對象。在我們剛剛提出的GET請求的回調中，我們將用戶的永久鏈接存儲在可變user_perma（在全局範圍中定義的）中，因此我們可以稍後使用。
    • > functions setui（），getTracks（）和getPlayLists（），設置UI，列出用戶的曲目並分別列出用戶的播放列表。這些函數在同一文件中定義。
      • >
      • >當單擊任何曲目或播放列表名稱時，play（）函數執行，該函數使用sc.oembed（）方法在我們頁面中嵌入音頻播放器，用於該曲目或播放列表。
    > 
    <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>
      >我們可以做更多的事情，例如獲取或更新用戶的描述，獲取用戶的頭像，查看用戶所關注的人以及他們的收藏夾。
    • 摘要
    如果要使用用戶 - login功能，請使用舊版本的SDK版本。它是穩定的，並且使用回調函數返回數據。

    >

    如果未使用用戶蛋白功能，則可以使用較新的SDK版本。它使用承諾返回數據。

    SoundCloud API的數據可以通過簡單的獲取請求訪問。 > 可以使用 /ME端點獲得

    >用戶特定的數據，但是只有使用SoundCloud帳戶將用戶登錄到我們的網站時。
      從客戶端查詢API是一種強大的工具，因為它使我們免於後端的複雜性，因此是一個強大的工具。 SDK使我們的生活變得更加輕鬆。在學習了基礎知識之後，我們可以創建更強大和用戶友好的Web應用程序。查看一些可能的示例，並查看官方的SoundCloud文檔，以了解有關可用高級API方法的更多信息。
    • >我很想听聽您使用SoundCloud SDK構建（或計劃構建）的內容。在評論中讓我知道！
      • >

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

      一起使用

      >將SoundCloud API與Jav​​aScript SDK使用SoundCloud API的先決條件是什麼？您還需要在SoundCloud上擁有一個SoundCloud帳戶和註冊應用程序。註冊的應用程序將為您提供客戶ID，這是提出API請求的必要條件。

      >

      >如何在SoundCloud上註冊申請以獲取客戶端ID？

      SoundCloud，您需要登錄到SoundCloud帳戶並導航到“應用程序”部分。在這裡，您可以通過提供必要的詳細信息，例如應用程序名稱，描述，網站和重定向URI來創建一個新的應用程序。創建應用程序後，將為您提供客戶端ID。

      >如何使用我的客戶端ID初始化SoundCloud API？ sc.Initialize方法並使用客戶端ID傳遞對象。這是一個示例：

      sc.Initialize（{

      client_id：'your_client_id'

      }）;


      >

      替換'your_client_id'在您的註冊應用程序的client.client_id'。 >
      >如何提出API請求以SoundCloud？

      您可以使用SC.Get方法提出API請求。此方法採用兩個參數：端點和回調函數。終點是您要訪問的API資源的URL，並且在收到API響應時執行回調函數。提出API請求，可以使用捕獲方法來處理錯誤。此方法將函數作為參數，在發生錯誤時將執行。錯誤對像傳遞到此函數，允許您適當處理錯誤。

      >

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

      >如何暫停並恢復軌道？

      暫停軌道，您可以在流上使用暫停方法目的。要恢復曲目，您可以再次使用播放方法。

      >如何獲取曲目的詳細信息？

      獲得曲目的詳細信息，您可以使用sc.get。方法並將軌道的URI作為參數傳遞。 API響應將包含曲目的詳細信息。

      >如何搜索曲目？

      搜索軌道，您可以使用sc.get方法並傳遞“/tracks”作為端點。您也可以傳遞查詢參數以過濾軌道。例如，要搜索具有標題“ My Track”的曲目，您可以使用以下代碼：

      sc.get（'/tracks'，{q：'my track'}）。然後（function function （tracks）{
      console.log（tracks）;
      }）;

      >我如何獲取用戶的軌道？

      sc.get方法並通過'/user/{user_id}/tracks'作為端點。用用戶的ID替換“ {user_id}”。 API響應將包含用戶的曲目。

      >

以上是將SoundCloud API與Jav​​aScript SDK一起使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery chrome html Array Object Resource if for while checkbox include require try catch Directory Error Logging Filter register break using Event Collection JS console undefined function this promise github http ui issue embedding Access Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：通過與Cocycles的功能查找JavaScript代碼段下一篇：通過與Cocycles的功能查找JavaScript代碼段

相關文章

看更多