SoundCloud でいろんな人のトラックを聴いて回ってると、いい曲が見つかって、「次この曲を再生予約したいなあ」などと思うことがよくありますので user.js 書きました
機能概要
- Queue追加ボタン: 再生ボタンの隣に (+) みたいなボタンがつく
- Queue Playlist: ページ右上に [Queue] というボタンがついて、押すとキューのプレイリストが表示される
- 並び替え: キューのプレイリストのトラック名をドラッグドロップで並び替え可
- リストから削除: キューのプレイリストのトラック名をリストの外にドロップすると削除される
- localStorage に保存してるのでページ移動しても保持できる
Install
スクリプトを書く前に、キュー機能はないのかなと調べてたら公式ブログがそのうちつけるみたいなこと言ってて、実装例は発見できず、あれこれ検索してるうちに SoundCloud のソースコードを見てて、
minify された JavaScript なのですが、通常 minify では Object のプロパティ/メソッド名まで1文字とかにしないので、時間はかかったけど解析っぽいことはできました
関数名がわかりやすい。いちいち調べなくても連想できるくらい的確な単語で、追ってるうちに Backbone.js + jQuery + Underscore.js + RequireJS ぽいことがわかってきた
例えばページ遷移は
// soundcloud.com/stream に移動
require('config').get('router').navigate('/stream', true);
で移動できる。ヘッダーの黒いバーはそのままで content だけ書き換わる
Backbone.js なんて触ったことないし、AMD も頻繁に使うわけではないので慣れてない。ソースを見てるうちに魅力的だと思った
非同期処理はほとんどが jQuery.Deferred で行われている。カンマ演算子だらけなのは minify の影響なのかな。
sound model は、polling-model, audible などの複数から継承されている、playlist model は Backbone の Collection から継承されている。
playlist に複数の sound が入り、基本的に複数の soundsCollection なるものを持っていて、トラックの再生が続く感じ。
Sound オブジェクトは、とりあえず以下のようにして生成できる
var sound = new require('models/sound')({
id: 115078163,
resource_id: null
});
resource_id は、オブジェクトを定義するごとにインクリメントされる counter のような値っぽいですが、その値までわからなかったので null にしたら一応作れた
id は track id のことで、トラックの URL から track id に変換する必要があります。
最初は sdk を使って id を取得してたのですが、今は
API を使っています
http://api.soundcloud.com/resolve.json?url=http://soundcloud.com/matas/hobnotropic&client_id=YOUR_CLIENT_ID
ここで使う client_id は、
var client_id = require('config').get('client_id');
こんな感じで取得できます
トラックの再生や停止などの制御は sound model から play() するのか、audioManager というのを使うのか、それとも play-manager か探ってましたが
今は play-manager を使っています。どれがベストなのかわかりませんが、
require('lib/play-manager').toggleCurrent({
userInitiated: true
});
これでヘッダーの再生ボタンを押したのと同じ効果が得られます
任意のトラックを再生するには、
var trackId = 115078163;
var ms = require('models/sound');
var pm = require('lib/play-manager');
var sound;
// 初回はこの方法じゃないとダメっぽい
sound = ms.instances.get(ms.hashFn({
id: trackId,
resource_type: 'sound'
}));
if (!sound) {
sound = new ms({
id: trackId,
resource_id: null
});
}
// まだ何も再生してない場合
if (pm.sourceCursor === -1) {
pm.setInitialSource(sound);
}
pm.playSource(sound);
適切なやり方なのか不明ですが、とりあえずこれで再生できると思います。
トラックの再生は、たぶん本来 playlist に入れて soundsCollection とかで扱うっぽいですが、解析力不足です。
あと、難関だったのが、曲の再生が終わったことを取得する方法です。
最初は <title> の文字列を見て判断してたのですが、なんだか悲しくなったのでやめました。
SoundCloud は、'finish', 'audio:flash_block', 'change:source', 'change:currentSound' などいろいろな Events が定義されていて、
on('finish', ...) とかでいけそうな気がしたんですが、あれこれやって動かなくて play-manager で定義されている 'change:currentSound' を使うことにしました。
でもこれ、本来の次の曲が一瞬 かかってしまうことがあって、現状の問題点となっています。
var pm = require('lib/play-manager');
pm.on('change:currentSound', function(sounds) {
var prevSound = sounds.prev;
var currentSound = sounds.current;
// ...
});
こんな感じにすると、曲が変わった時に拾ってくれます。ただ、自分で再生ボタン押して違う曲にしたときも反応するので、今回の user.js ではめんどくさい感じになってしまいました。
なんだかんだで SoundCloud のソースコードは読み応えがあって、コード解析を通して Backbone.js の勉強になった気もして minify コードを無理に読むのもいいかも
そんなこんなの事情もあって、まだ動作が不安定かもしれないです。
SoundCloud が今の UI のうちは user.js のメンテ続けたいところ。
Contact
