この記事はRecruit Engineers Advent Calendar 2017 - Adventarの24日目の記事です。
23日目は、id:tiro105さんの"僕の考えるARVRの現状"でした。
tiro105.hateblo.jp
WIPです
WIPの記事を投稿することをお許し下さい。
達意な文章を書きたいところですが、単に時系列に沿って書きます。
一段落したらまとめます。
ジュークボックスのようなものを作る
ボウリング場に、ジュークボックスってありましたよね？
先日、家族で食事している時に、スマートフォンとスピーカーをペアリングして色々な曲をかけていました。おそらく平均よりは老若男女に富む大家族なこともあり、懐かしの歌やある感情を呼びおこす歌はもちろん、古すぎて知らない歌、新しすぎて知らない歌などに触れました。
YouTubeやSoundCloudで知らなかったけど好みな歌に出会うことは多いですが、全くの他人の選曲(家族ですが)というのも、すごく楽しいことに気づきました。
AppleMusicやSpotifyを使えば友達のプレイリストを覗き見れるとは思うのですが、同じタイミングで聴くことはできない。あの、次は何がかかるのかというワクワク感、曲のエピソードトークを手短に言う感じ、みんながピンと来てなかったらさっさと次の曲に行きつつも（ごめんね）とアーティストに心のなかで謝るあの感じは実現できません。
何かって、ジュークボックス的感覚ですよね。
100円入れるとレコードあるいはCDが切り替わり、その曲が流れるというやつ。
小学生の頃、友人と行ったボウリング場で一度だけ100円を投入した記憶が蘇ります。何をかけたかは忘れましたが。
パーティピーポーの素養、少しだけあるんじゃないかと思いながらこれが実現できるwebアプリケーションを作ろうと思い至りました。
やりたいこと
共通のqueueに曲が入っている
addできる
再生状況をsyncする
YouTube IFrame Player API 使う
index.htmlで
APIのmoduleをloadしたら、divをiframeに置き換える
playerがYTオブジェクト
onReadyイベント: playerが読み込まれたことをhookする
onStateChangeイベント: playerの再生/停止などをhookしてくれる
onErrorイベント: videoIdがinvalidだったり、指定したvideoIdの動画が埋め込みを禁止している場合に発火する
playerへの命令は以下のメソッドを使用
cuePlaylist
playVideo
stopVideo
seekTo
nextVideo
previousVideo
playVideoAt
やったこと
- 再生、queueへの追加などができるように
- ハードコードしたvideoIdのlistを使って再生する
- serve-static使って、expressより配信する
- 入力のインターフェイス、何が適切かわからない。
- →一旦、videoidをformタグから入れるのみにします
- ws moduleを使ってWebSocket接続する
- ws.onで、メッセージ受信時にconnectionsから各clientにbroadcastする
- server.jsの中でvideoidのlistとindexを持っておけば良さそう
- videoIdについて、永続化しなきゃいけないことはない
- commandを使って
- objectだとBlobとして送信される
- Stringを送信にしとく
- HTTPみたいにURIで使い分けるのはできない認識で合ってますかね
その後の進捗
addしたらserverのlist増える
load時および誰かがaddしたタイミングで配信されて各clientのqueueが増える
他にやること
next, previousしたらindexが変わり、それが配信されて各clientで次/前の曲に移動する
seekTo使って、1曲の中でも同期されるようにする
githubで公開
ここまで、本記事にまとめる
今後やりたいこと
addのインターフェイス考えましょう
videoIdのlistに応じて、queueの各videoのタイトルやサムネイルを表示する
誰がaddしたかを可視化する
1つのプロセス内で複数のplayListを管理できるようにする
