2012年10月18日 星期四

V.K克的SoundCloud雲端琴聲 (MacToday 2012.10)


SoundCloud是目前十分火紅的雲端音樂平台，如果說Youtube是諸葛亮，那麼SoundCloud就是周瑜了。Youtube的強項在影片，SoundCloud則在音樂。這些雲端平台讓許多像彼得潘這樣的平凡人實現唱歌，演電影的夢想，而對已經成名的明星來講，這些雲端平台不只有著更快，更國際化的宣傳效果，還能省下大筆的行銷預算。接下來彼得潘將以好朋友，亞洲鋼琴天王V.K克存放於SoundCloud的作品為例，介紹如何結合SoundCloud API，播放V.K克遠在天邊的琴聲陪伴我們度過漫漫長夜。

一. 雲端音樂霸主SoundCloud

SoundCloud大方地提供我們不小的雲端音樂儲存空間，方便我們和朋友分享自己石破天驚的創作或一聽上癮的歌聲。畢竟像張學友這樣的歌神，周杰倫這樣的創作奇才， 一百年才出現一個，120分鐘的音樂總合時間，對於像彼得潘這樣的素人來說已經足夠。





彼得潘的好朋友，鋼琴天王V.K克，早已將專輯裡的音樂放到SoundCloud上，讓網友們免費試聽。如圖所示，我們可以看到SoundCloud十分強大，不只提供播放音樂的功能，還結合了Facebook的Like，iTunes的購買連結，讓更多的人可以認識，分享V.K的音樂。



二. 獵取V.K克的雲端使用者ID

想要在App裡播放V.K克的音樂，首先我們得先顯示音樂清單，也就是要取得V.K克的作品清單。SoundCloud提供以下API供我們取得某人的音樂清單。


USER_ID和CLIENT_ID是我們要另外指定的。現在彼得潘首先介紹如何獵取V.K克的雲端使用者ID，也就是USER_ID。

 1. 連到SoundCloud的V.K克頁面。



2. 點選Share按鈕，從彈出的視窗裡複製Embed Code。


3. 解密Embed Code。

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F8546094&show_artwork=true"></iframe>

重點在於users%2F8546094，%2F後的8546094即是神秘的V.K克USER_ID。真是踏破鐵鞋無覓處，得來全不費功夫，太容易了!



三.  取得神秘的CLIENT_ID

為了防止閒雜人等隨意存取，利用CLIENT_ID之類的字串來識別來者為何方神聖，只有握有合法認證CLIENT_ID的App才能存取雲端上的珍貴資料，已成為大多數網站採用的API存取機制。因此SoundCloud也不例外，接下來就請各位讀者跟著彼得潘一步步操作，建立握有合法CLIENT_ID，存取V.K克雲端音樂的App。。

1. 連到SoundCloud網站首頁。

 http://soundcloud.com



2. 點選Sign in with Facebook，以Facebook帳號登入。

3. 建立新App。

連到以下頁面，http://soundcloud.com/you/apps，點選Register a new application按鈕。


4. 設定App名稱V.K克。


5. 設定App採用走在時代尖端的認證機制OAuth2。

什麼都不用改，只要點選右下角的Save app即可。

我們尚缺的那臨門一腳，Client ID，原來就在此頁面。請將它好好記牢，等會彼得潘將結合User ID和Client ID，登上雲端聆聽V.K克的琴聲。

四.  結合SoundCloud SDK。

1. 建立Single View Application專案ListenVK。

2. 安裝SoundCloud SDK。

切換到專案ListenVK資料夾下。

git submodule add git://github.com/soundcloud/CocoaSoundCloudAPI.git
git submodule add git://github.com/nxtbgthng/OAuth2Client.git
git submodule add git://github.com/nxtbgthng/JSONKit.git
git submodule add git://github.com/nxtbgthng/OHAttributedLabel.git
git submodule add git://github.com/soundcloud/CocoaSoundCloudUI.git

將CocoaSoundCloudUI.xcodeproj, JSONKit.xcodeproj, OAuth2Client.xcodeproj, OHAttributedLabel.xcodeproj, CocoaSoundCloudAPI.xcodeproj加入專案。


3. 設定header。

切換到Target的Build Settings頁面，於Header Search Paths欄位輸入代表專案目錄的$PROJECT_DIR，並記得勾選前面的框框。如此到時尋找header時將recursive地尋找專案目錄下的所有檔案。


4. 設定依靠的library(Target Dependencies) 。

切換到Target的Build Phases頁面，於 Target Dependencies區塊加入libSoundCloudUI.a, OAuth2Client.a, libJSONKit.a, OHAttributedLabel.a以及SoundCloudAPI.a。


5. 設定連結的library

於Link Binary With Libraries區塊加入libJSONKit.a, libOAuth2Client.a, libOHAttributedLabel.a, libSoundCloudAPI.a, libSoundCloudUI.a,  AddressBook.framework, AddressBookUI.framework, CoreLocation.framework, CoreText.framework,QuartzCore.framework, Security.framework。


6. 設定linker flag。

切換到Target的Build Settings頁面，於Other Linker Flags欄位輸入-all_load -ObjC。


7. 將原本在SoundCloudUI.xcodeproj -> Resources的SoundCloud.bundle複製到ListenVK下。



五.  取得SoundCloud上的V.K克音樂清單。

NSString *resourceURL = @"https://api.soundcloud.com/users/8546094/tracks.json?client_id=9fcae9e1437a8ca39cd9d60d6c8cc321";
    
NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:resourceURL]];
    
[NSURLConnection sendAsynchronousRequest:req queue:[NSOperationQueue currentQueue] completionHandler:^(
         NSURLResponse  *response, NSData *data,                                                                 
                                NSError *error) {
         if(error == nil)
         {
             NSError *jsonError = nil;
             NSJSONSerialization *jsonResponse = 
               [NSJSONSerialization JSONObjectWithData:data
                          options:0 error:&jsonError];
             if (!jsonError && [jsonResponse isKindOfClass:[NSArray 
               class]]) {
                 NSArray *trackArray = (NSArray *)jsonResponse;
             }
         }
     }];

說明:
(1) NSString *resourceURL = @"https://api.soundcloud.com/users/8546094/tracks.json?client_id=9fcae9e1437a8ca39cd9d60d6c8cc321";

有了V.K克的USER_ID和V.K克App的CLIENT_ID，即可由tracks.json取得音樂清單。

(2) NSJSONSerialization *jsonResponse = [NSJSONSerialization
                                                  JSONObjectWithData:data
                                                  options:0
                                                  error:&jsonError];
      if (!jsonError && [jsonResponse isKindOfClass:[NSArray class]]) {
                NSArray *trackArray = (NSArray *)jsonResponse;

Server回傳的音樂清單，其實是JSON格式，Array包裝成的清單，因為我們將其轉化為NSArray。Array裡的每個元素都是內容豐富的Dictionary，除了常見的title(曲目名稱)，artwork_url(圖片)外，連購買連結(purchase_url)都貼心幫我們準備好。


執行App:

顯示SoundCloud上取得的V.K克音樂清單。


六.  播放V.K克的琴聲。

NSDictionary *track = [trackArray objectAtIndex:indexPath.row];
NSString *streamURL = [NSString stringWithFormat:@"%@?client_id=9fcae9e1437a8ca39cd9d60d6c8cc321", [track 
    objectForKey:@"stream_url"]];
self.player = [AVPlayer playerWithURL:[NSURL  
                 URLWithString:streamURL]];
[self.player play];

說明:
(1) NSString *streamURL = [NSString stringWithFormat:@"%@?client_id=9fcae9e1437a8ca39cd9d60d6c8cc321", [track 
    objectForKey:@"stream_url"]];

包含豐富音樂資訊的Dictionary裡， stream_url正包含音樂檔案連結的URL。

(2)  self.player = [AVPlayer playerWithURL:[NSURL  URLWithString:streamURL]];

利用 AVPlayer的playerWithURL: method，幫我們連線天邊，串流雲端的V.K克音樂。



張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)