SoundCloudのAPIを使ってみた


Soundcloud

最近Sound CloudのAPIを使った簡単なアプリを作っております。
で、調べてみるとSound CloudってAPIで相当色んな事ができるようでしてDocument見た時につかれたので実装したところからメモ残しておこうと思います。


WidgetAPI

今回は一番簡単と思われる。「WidgetAPI」
公式のDocumentはこれ
APIドキュメント(公式)

SoundCloudの音楽をHTML内に埋め込むWidget。
けど単に埋め込むだけでなく、高機能なJSのライブラリ(っていう言い方は正しいのだろうか)が用意されていて音楽の操作然り、今流れている曲の情報を取得したりと、多様な操作が可能になっている。

まずHTMLにご希望のiframeを埋め込

ちなみに、最初にiframeを埋め込んでおいて、その中の音源を変更する事も可能。

とりあえずSoundCloudのサイトで好きな音源を探して、
Share -> Embed を選択すると 下のSode & preview の欄に埋め込むべきiframeのタグが生成されているのでこれをコピペするだけ。

昨日の夜(というか今朝未明に)小◯原さんからYOが飛んできたので、SoundCloudで “bonbon” と検索したら bonbon というアーティストがいたのでこれで例を進める。

誰なんだこれは一体ww


Bon Live TV Lounge Detroit MI 2 Hour Proton Edit 2014 03 by Bonbon

アーティストの音源を全部Embedする時は、Profileの欄のすぐしたのShareから・・
てか、ホントに誰なんだこれはww


Bon Live TV Lounge Detroit MI 2 Hour Proton Edit 2014 03 by Bonbon

一曲単位で埋める場合は、曲の下にある下図のアイコンから


Bon Live TV Lounge Detroit MI 2 Hour Proton Edit 2014 03 by Bonbon

人のPlaylistsを埋め込む事も可能で、その場合は検索結果画面で「Playlists」を選択するとわかりやすい。
この結果の好きなものをShareで選択してiframeのタグを抽出する。


Figure Beast Mode feat Del The Funky Homosapien VIP in merdes

JS側の実装

まずこのjsだけは読み込んでおく。これでsoundcloudが提供する様々な操作が可能になる。
api.js

その後、自分でjsでiframeを操作する流れ。
公式Documentでは

var iframeElement = document.querySelector('iframe'); 
var iframeElementID = iframeElement.id;
var widget1 = SC.Widget(iframeElement); 
var widget2 = SC.Widget(iframeElementID); 
// widget1 === widget2

と書いてあるが、HTML内に複数iframeがあっても大丈夫なのかな・・
どうなるか調べてない。

ちなみに、自分でiframeにidをふって

var widgetIframe = document.getElementById(‘myMusic’);
var widget = SC.Widget(widgetIframe);


でも動いたけど、これだとiframeをコロコロ変えられないとか そいういう事かな。

音楽を操作しようず

上記のwidgetオブジェクトに様々な操作用の関数やゲッター・セッター的なものが用意されているのでこれを使って操作する。
とってもわかりやすい。
widget.play(); で再生
widget.pause(); で停止
widget.toggle(); で再生中だったら停止して、停止中だったら再生する。
またPlaylistsを埋め込んでいる状態であれば
widget.next(); で次の曲に送る事も。

あとsetVolume(volume)というメソッドも用意されているが、これはよくわからんのでまだ試していない。
使ったらupdateします。

ゲッターもあるよ!

この値取得系、最初少し混乱しました。
例えば、 widget.getCurrentSound() というメソッドが用意されているから、jsトーシロな私はすっかりメソッドの結果が返り値としてReternされるのだと思っていたが、callback関数内でしか受け取れないんですね。
ドキュメントにも widget.getCurrentSound(callback)と書いてあったのはそのためか。

と、いうわけで


widget.getCurrentSound(function(data){
     console.log(data.title);
});

とか書くと、今流れている曲のTitle要素が取れました。
他にも作者だとかURLだとかたっぷりcallback側に与えられるオブジェクトに入ってるので、詳細は見てみてください。

他にも現在の位置(再生中の曲の開始から◯秒たっている等)や、Volumeの情報など
色々とGetterで取れました。

経過秒数をリアルタイムで取得するには?

曲を再生している間、秒数的なものをカウントアップして表示したかったので少し調べました。
基本的に現在の秒数は、ゲッターの getPosition() で取得可能なのですがゲッターはDocumentに

Since communication between the parent page and the widget’s iframe is implemented throughwindow.postMessage, it’s not possible to return the value synchronously. Because of this, every getter method accepts a callback function as a parameter which, when called, will be given the return value of the getter method.

と書かれており、(今アメリカに滞在してるくせに英語が全然できないながらも気合で読んでみると) シンクロできひんよ、と読み取れます。

というわけで、(たぶん)何度もこのゲッターメソッドを叩いて値を取得して画面表示するしかないように見えます。
※他にやりかたある人是非教えてくださいです。

そんなわけでjsの定時処理を参考にしながら書いたスクリプト。
setInterval()を使って毎秒毎に秒数を更新しているだけです。
余談ですが、オブジェクトから取得できる秒の単位は1マイクロ秒です。

var timeMonitor, intervalID, displayTime;
timeMonitor = function(){
  intervalID = setInterval(displayTime, 1000);
};

displayTime = function(){
  player.getPosition(function(data){
    var sec = Math.floor(data / 1000);
    $("#positionId").text(sec);
  });
};
timeMonitor

ただ、毎度getterで呼び出さないといけないのでo.1秒以上の誤差がありました。
これが大きくなって2秒間同じ秒数が表示されるタイミングがあるんじゃないかとヒヤヒヤしています。
やっぱり他にいい方法ないか誰かが教えてください! 
+(0゚・∀・) + ワクテカ + 

まとめ

サウンドクラウドのAPI色んな機能ついてて、よく出来てる。ほんとよく出来てる。
てか、どうやって儲けてるんでしょうかww
他にもWebに曲をアップロードするAPIだとかまだまだ色々あって、本当に開発コストかかってるなぁーと。

rubyのSDKもあったですよ(∩´∀`)∩♫

また、jsのライブラリも使いやすいので好きな音楽プレーヤーを自分で実装してみてはいかがでしょうか。

おわり!

 

2014-10-22 | Posted in JavaScript - jQueryNo Comments » 


関連記事

Comment





Comment



*