Hatena::Groupsubtech

NaN days

ブログを移転しています。最新の記事は motemen.hatenablog.com へどうぞ

2012-10-16

みんなで一緒にウェブ上の音楽を聞ける polka というウェブアプリケーションを作りました

| 13:49 | みんなで一緒にウェブ上の音楽を聞ける polka というウェブアプリケーションを作りました - NaN days を含むブックマーク はてなブックマーク - みんなで一緒にウェブ上の音楽を聞ける polka というウェブアプリケーションを作りました - NaN days

Teto というのを作って、これはニコニコ動画の音声をストリーミングして配信する、というようなことをしていたのですが、いかんせん仕組みが複雑で簡単に使える感じじゃないな〜という問題があり、また、オフィスのみんなでひとつのキューを共有しつつ同時に同じ音楽を聞けたらいいな、という要求を、音声の読み込みや再生処理をすべてクライアントサイドで行うことにして実装したのが polka です。

これからは node.js だよねーノードジェスジェス!と思って node.js で何か書いてみようと思って作りはじめたのが最初でした。

https://github.com/motemen/polka

概要

polka はローカルで起動するウェブアプリケーションです。再生キューをひとつだけ持ち、接続してきたブラウザで同時に同じ音楽を聴くことができます。

実装は node.js + socket.io くらいの感じです。

使い方

2012-10-16 18:10 追記: node v0.8 くらいが必要みたいです!

いい感じにパッケージ化する方法がまだわかってないので github から clone して下さい。

% git clone git://github.com/motemen/polka.git
% npm install
% PORT=3000 npm start

で http://{IPアドレス}:3000/ に polka のサーバが立つので、あとはここにアクセスして貰えばよいです。

  • /queue で URL もしくは検索によってトラックを追加し、
  • /play をブラウザで開きっぱなしにしておくことで自動で再生が行われます。

仕組み

音声の再生には YouTubeSoundCloud の埋め込みプレーヤーを利用していて、polka 自体はキューと再生タイミングの管理だけを行っています。polka のページをブラウザで開くと自動で次々とプレーヤーが埋め込まれてゆき、再生されます。

ブラウザの中でも /play ページに最初に接続したものが master と呼ばれ、この人がほかの人 (echo) の再生のタイミングを管理します。master のブラウザでプレーヤーの再生が終了したタイミングで、他のブラウザも一斉に次のトラックへと進みます。

なので master になってる人が埋め込みに失敗したり (YouTube にはリファラを切ってると埋め込めない動画がある) 途中でポーズしたりすると次に進めなくて困るような場合がありますが、その時は /admin にアクセスして next ボタンをクリックすると強制的に次のトラックへと進みます。

対応しているソース

いまのところ埋め込めるのは以下の 2 サービスのみです。

ニコニコ動画の埋め込みプレーヤーは JavaScript によるコントロールができないっぽいので対応していません。ドワンゴさんよろしくお願いします!!

Patches welcome

……というのを社内に設置してみて、まあいろいろと変な挙動はあるかと思いますが、とりあえず一日は普通に使えた感じです。同僚にもいろいろと機能を追加してもらいました。プルリクエストお待ちしております。