您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何在JavaScript SDK里使用SoundCloud API”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何在JavaScript SDK里使用SoundCloud API”吧!
入門指南
Promises介紹鏈接地址: http://www.oschina.net/translate/what-is-the-point-of-promises?print
了解HTTP和API的概念和工作方式對你學(xué)習(xí)本教程將會有幫助。如果你想了解更多關(guān)于API的信息,我推薦你看看:An Introduction to APIs(對API的一個(gè)介紹。鏈接地址:https://zapier.com/learn/apis/)。同時(shí)知道一點(diǎn)關(guān)于異步JavaScript,promises和回調(diào)函數(shù)對你學(xué)習(xí)本教程也是有幫助的。在本文我們的代碼示例中使用了jQuery,所以如果你了解jQuery的基本知識,那么你閱讀本文的代碼示例就不會那么痛苦。
為了使用JavaScript來開始查詢SoundClound API,我們需要下載由SoundClound提供的JavaScript SDK。就像在文章開頭提到的,這里共有兩個(gè)不同的SDK版本可以使用。
使用哪個(gè)版本的SDK呢?
這兩個(gè)版本的SDK的主要不同之處在于當(dāng)一個(gè)異步請求產(chǎn)生并將請求發(fā)送給SoundClound API時(shí)它們返回?cái)?shù)據(jù)的方式不同。***版本的SDK返回的是一個(gè)Promise,而另一個(gè)版本的SDK需要把一個(gè)回調(diào)函數(shù)作為一個(gè)參數(shù)返回。
我注意到一個(gè)問題,隨著文檔使用的SDK版本,在該版本的SDK用戶登錄功能界面上似乎有一個(gè)問題,這個(gè)問題就是彈出的登錄窗口不會自動(dòng)關(guān)閉。
因此,為了簡單起見,并且因?yàn)槔习姹維DK更穩(wěn)定,我們將在文章示例中使用老版本的SDK來貫穿本教程。此版本的SDK將需要為客戶端的異步請求返回一個(gè)回調(diào)函數(shù)。
使用SoundCloud API
設(shè)置一個(gè)基本的HTML文檔
我們創(chuàng)建一個(gè)基本的HTML頁面,該頁面用作我們的主頁。我們在這個(gè)頁面上<script>標(biāo)簽的屬性src里包含進(jìn)了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>
注意:我們在HTML頁面里的<script>標(biāo)簽的src里包含進(jìn)去的SDK地址是SoundCloud的服務(wù)器地址。你也可以把SDK下載下來,然后像下面這樣引用:
<script src="sdk.js"></script>
可以通過下面的方法步驟測試一下SoundCloud的SDK是否在你的網(wǎng)頁中被正確加載:
用瀏覽器打開這個(gè)頁面(建議使用谷歌的Chrome瀏覽器)。
在瀏覽器里打開開發(fā)者控制臺(在谷歌Chrome瀏覽器里打開開發(fā)者控制臺的快捷鍵是Ctrl+Shift+J)。
在開發(fā)者控制臺里輸入SC,然后按Enter鍵。SC就是剛剛我們在HTML頁面里包含的SDK創(chuàng)建的一個(gè)JavaScript對象。
如果出現(xiàn)了未知的錯(cuò)誤,那就說明SoundCloud的SDK沒有被正確加載。試著刷新一下,同時(shí)確定你的SDK文件(也就是sdk.js文件)的路徑是正確的。
注冊一個(gè)SoundCloud App
去注冊一個(gè)SoundCloud app,你需要做的就是擁有一個(gè)SoundCloud賬戶。如果你還沒有一個(gè)SoundClound賬戶,就去創(chuàng)建一個(gè)。通過注冊一個(gè) app,SoundCloud服務(wù)器就能夠驗(yàn)證我們的請求,這樣其他人就不可能以我們的名義來發(fā)送一個(gè)請求了。
注意:如果我們不準(zhǔn)備在我們自己的網(wǎng)站中使用SoundClound用戶登錄功能,我們可以跳過這一步。這將在下面的部分解釋。
打開SoundClound app頁面。在這個(gè)頁面上所有我們已經(jīng)創(chuàng)建好的app都會被列出來。確保你登錄了你的SoundCloud賬戶。注意:你不用為了這個(gè)目的創(chuàng)建一個(gè)獨(dú)立的賬戶。你可以用同一個(gè)賬戶來為你的個(gè)人目的使用。
點(diǎn)擊注冊一個(gè)新應(yīng)用按鈕。
給你的app起一個(gè)名字,然后點(diǎn)擊復(fù)選框接受SoundCloud的開發(fā)者政策條款。
點(diǎn)擊那個(gè)大大的”注冊”按鈕,來完成app的注冊。
在我們成功注冊之后,注冊頁面將直接跳轉(zhuǎn)到我們剛剛創(chuàng)建好的app設(shè)置頁面。在app設(shè)置頁面上,我們將看到我們的app客戶端ID,這個(gè)ID將會被用來驗(yàn)證授權(quán)我們的請求。我們可以關(guān)掉該頁面,然后現(xiàn)在開始回調(diào)字段了。我們之后會用到這個(gè)客戶端ID的。
初始化客戶端
通過”初始化客戶端”,那也就是意味著我們使客戶端準(zhǔn)備好在它和SoundCloud API之間做數(shù)據(jù)的交換。我們可以在我們之前創(chuàng)建的基本HTML文檔里來做初始化客戶端的工作,或者在一個(gè)內(nèi)部js文件里來做初始化客戶端的工作。
JavaScript語法是這樣做的:
SC.initialize({
client_id: "CLIENT_ID",
redirect_uri: "CALLBACK_URL"
});
(代碼見原文)
讓我們分段來看它:
上面代碼中的CLIENT_ID會在我們注冊app的時(shí)候提供給我們。
上面代碼中的CALLBACK_URL是callback.html的URL,這個(gè)callback.html是用戶登錄后一個(gè)HTML文件的稱呼。我們很快就會創(chuàng)建它。
在初始化完成之后,現(xiàn)在我們可以準(zhǔn)備查詢SoundCloud API了。讓我們看看在那之前我們可以做的一些例子。
示例
如果我們打開瀏覽器的控制臺并輸入”SC.”,然后與SC對象有關(guān)的方法就會列出來。SC.get(uri,callback)就是其中一個(gè)方法,這個(gè)方法用來向SoundCloud API產(chǎn)生GET請求。
獲得一份跟蹤列表
為了獲得跟蹤的隨機(jī)列表,我們可以使用SC.get()方法,像下面這樣:
SC.get("/tracks", function(response) {
for (var i = 0; i < response.length; i++) {
$("ul").append("<li>" + response[i].title + "</li>");
}
});
(代碼見原文)
上面的代碼是干什么的,它是用來查詢/tracks端點(diǎn)并且在查詢完端點(diǎn)后返回一個(gè)回調(diào)函數(shù)的。響應(yīng)數(shù)據(jù)是保存在回調(diào)響應(yīng)參數(shù)里的,它是一個(gè)有著很 多屬性的JavaScript對象數(shù)組,title屬性就是眾多屬性中的一個(gè)。我們可以在代碼里寫:console.log(response[0])來 在控制臺日志輸出響應(yīng)數(shù)據(jù)的***個(gè),而不用循環(huán)遍歷所有的對象和對象所對應(yīng)的屬性。然后,我們就會知道哪些屬性我們可以使用。
注意:在這個(gè)代碼示例中,我們在初始化的時(shí)候并沒有指定一個(gè)回調(diào)URL。這是因?yàn)槲覀冎付ú恢付ǘ疾恢匾?。不管怎樣我們的代碼都會執(zhí)行。但是一旦我 們實(shí)現(xiàn)了用戶登錄功能,這就是必須的而且很重要了,因?yàn)楫?dāng)你指定一個(gè)回調(diào)URL后,其他人就不可能使用我們的Client ID。
嵌入一段跟蹤代碼
SC對象提供了其他的方法:SC.oEmbed(url,options,callback)。該方法把SoundCloud播放器嵌入我們的網(wǎng)站,并且允許我們播放我們選擇的軌跡。
SC.oEmbed('https://soundcloud.com/username/complete-url-to-the-track', {maxheight: 200, auto_play: false}, function(res) { $("#player").html(res.html); });
我們分段來看它:
首先在該方法的***個(gè)參數(shù)里,我們給了一個(gè)完整的我們想要播放的跟蹤URL。
該方法的第二個(gè)參數(shù)是可選參數(shù),在這個(gè)參數(shù)里,我們可以為播放器設(shè)置一些選項(xiàng)。如果想了解更多,點(diǎn)擊下面鏈接:https://developers.soundcloud.com/docs/api/reference#oembed
第三個(gè)參數(shù)是一個(gè)回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里,我們將我們頁面里的(id為player)的一個(gè)元素的內(nèi)容用該播放器(res.html)的HTML代碼替換。
這個(gè)跟蹤路徑可以用來在一個(gè)網(wǎng)站里嵌入一首歌或者一首音樂。
實(shí)現(xiàn)用戶登錄
為了實(shí)現(xiàn)用戶登錄功能,我們需要有一個(gè)回調(diào)URL來達(dá)到驗(yàn)證授權(quán)的目的。這是OAuth協(xié)議的要求。如果你想了解OAuth協(xié)議,這里有一個(gè)OAuth協(xié)議的簡單解釋:OAuth 2 Simplified(鏈接地址:https://aaronparecki.com/2012/07/29/2/oauth3-simplified)。因此讓我們在app設(shè)置里添加一個(gè)名為”callback.html”的回調(diào)URL,這個(gè)callback.html我們接下來就會創(chuàng)建。
OAuth協(xié)議介紹鏈接地址: http://menglimengwai.iteye.com/blog/496250
創(chuàng)建回調(diào)頁
在一個(gè)用戶登錄后,彈出式窗口會重定向到該文件。在我們的例子中,我們把該文件定義為”callback.html”,并且該文件和我們的主頁(index.html)保存在相同的目錄里。這個(gè)文件就是在我們的app設(shè)置里我們需要在回調(diào)字段里給定的文件。
我們需要在回調(diào)文件里使用的代碼在開發(fā)文檔里有提供。然而,開發(fā)文檔有點(diǎn)過時(shí),因此我們需要稍微調(diào)整一下來滿足現(xiàn)在的開發(fā)需要標(biāo)準(zhǔn)。
你可以根據(jù)你個(gè)人的喜好來調(diào)整它的通知和設(shè)計(jì),但是現(xiàn)在,我們使它越簡單越好:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Connect with SoundCloud</title> </head> <body> <h5>This popup should automatically close in a few seconds</h5> <script> document.onload = function () { window.opener.setTimeout(window.opener.SC.connectCallback, 1); } </script> </body> </html>
用戶登錄
SC.connect(callback)就是實(shí)現(xiàn)用戶登錄功能的方法。它通過打開一個(gè)彈窗式的窗口,提醒用戶登錄他們的SoundCloud賬戶。基本的使用方法如下:
SC.connect(function () { console.log("User has logged in"); });
如下是更有趣的示例:
SC.connect(function () { SC.get("/me", function (response) { console.log("Welcome" + response.username); }); });
讓我們分段來看它:
在用戶完成登錄以后,用戶登錄頁面將會被重定向到我們之前創(chuàng)建的callback.html頁面。
然后隨著我們閱讀完callback.html里的代碼,彈出式窗口會自動(dòng)關(guān)閉。
在那之后,我們的回調(diào)函數(shù)將獲得回調(diào),該回調(diào)是在SC.get()方法里通過一個(gè)GET請求到”/me”端點(diǎn)獲得的。
當(dāng)GET請求完成時(shí),上述代碼的回調(diào)函數(shù)就會執(zhí)行,然后在控制臺會輸出一條歡迎登陸的信息。
注意:請求”/me”返回的是當(dāng)前登陸用戶的數(shù)據(jù)。因此,在用戶登錄之前請求該URL將產(chǎn)生一個(gè)錯(cuò)誤的信息。
處理用戶數(shù)據(jù)
一旦用戶登錄完成,有很多事情我們可以做。為了演示一些功能,我在GitHub上創(chuàng)建了一個(gè)演示站點(diǎn)。你可以點(diǎn)擊這里查看源代碼: https://github.com/sitepoint-editors/SC_API,并且可以點(diǎn)擊這里看看它的執(zhí)行效果: http://mustagheesbutt.github.io/SC_API/。
讓我們看看這兩個(gè)文件。在index.html里,有四個(gè)重要的div元素,它們在用戶完成登錄后將會填滿用戶的數(shù)據(jù):
<main> <div id="ui"> <h3>Welcome <span></span></h3> <img id="avatar" /> <div id="description"></div> </div> <!-- TRACKS --> <div id="tracklist"> <h4>Your Tracks:</h4> <ul></ul> </div> <!-- PLAYLISTS --> <div id="playlists"> <h4>Your Playlists:</h4> <ul></ul> </div> <div id="player"></div> </main>
第二個(gè)最重要的文件是script.js:所有的奇跡都發(fā)生在這個(gè)文件里。大部分代碼我們都很熟悉,但是我們還是快速地看看:
// Initialization of SDK SC.initialize({ client_id: "21832d295e3463208d2ed0371ae08791", redirect_uri: "http://mustagheesbutt.github.io/SC_API/callback.html" });
首先初始化我們的app。注意,這次我們用redirect_uri指定了我們的callback.html頁面。這個(gè)URL或者URI必須和我們在app設(shè)置里指定的一致。
// Login handler var user_perma; $("#login").click(function () { SC.connect(function () { SC.get("/me", function (me) { user_perma = me.permalink; setUI(me.username, me.avatar_url, me.description); }); if (SC.isConnected) { $("header, main").addClass("loggedIn"); } getTracks(); getPlaylists(); }); });
然后我們給標(biāo)簽id為login的button添加一個(gè)點(diǎn)擊事件句柄。當(dāng)該按鈕被點(diǎn)擊時(shí),將會在點(diǎn)擊事件代碼里執(zhí)行SC.connect(callback)代碼,該代碼執(zhí)行后,將會彈出一個(gè)窗口提示用戶登錄。
當(dāng)用戶登錄完成后,彈出的窗口會關(guān)閉。然后SC.connect()里的回調(diào)函數(shù)就會執(zhí)行。在回調(diào)函數(shù)里,我們對”/me”端點(diǎn)發(fā)起一個(gè)GET請 求,而”/me”端點(diǎn)返回當(dāng)前登錄用戶對象。在剛才我們發(fā)起的GET請求回調(diào)里,我們在變量user_perma里存儲用戶的***鏈接,該參數(shù)是在全局范 圍定義的,所以我們之后可以使用它。
setUI()方法,getTracks()方法和getPlaylists()方法的功能分別是,設(shè)置UI,列出用戶的跟蹤記錄和列出每個(gè)用戶的播放列表。這些功能在同一個(gè)文件里已經(jīng)被定義了。
//找點(diǎn)東西播放 function play(uri) { url = "http://soundcloud.com/" + user_perma + "/" + uri; SC.oEmbed(url, {maxheight: 200}, function (resp) { $("#player").html(resp.html); }); }
//當(dāng)一個(gè)播放軌跡或者一個(gè)播放列表被檢查時(shí),使用’play()’函數(shù)播放
$("ul").on("click", function (e) { var title = e.target.innerHTML; if ( tracks.hasOwnProperty(title) ) { play(tracks[title]); } else if (playlists.hasOwnProperty(title)) { play("sets/" + playlists[title]); } });
當(dāng)任何跟蹤路徑或者播放列表名被點(diǎn)擊,play()方法就會執(zhí)行,該方法會為點(diǎn)擊的跟蹤路徑或者播放列表名通過SC.oEmbed()方法來在我們的頁面中嵌入一個(gè)音頻播放器。
我們能通過代碼做很多事情,例如獲取用戶類型或者更新用戶的信息,獲取用戶的頭像,接下來運(yùn)行代碼看看SoundCloud服務(wù)器返回的信息里用戶是誰和他們的愛好是什么。
到此,相信大家對“如何在JavaScript SDK里使用SoundCloud API”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。