読者です 読者をやめる 読者になる 読者になる

#21 AngularJS + soundcloud API で俺得 music player をつくる

この記事は tech.kayac.com Advent Calendar 2013 21日目の記事です。

こんばんは。13新卒の @m0t0k1ch1 です。 @mackee_w さんに立てていただいた scala フラグを倒させていただきまして、、ここ1週間くらい1人でこそこそやっていたことについて書きたいと思います。内容は表題そのままの感じです。

soundcloud について

soundcloud

  • 有名な無料音楽クラウドサービス
  • イケてる remix が多いので、ここで音楽を聴きながらコードを書くことが大半
  • ローカルに音楽ファイルを持ちたくないのでうれしい

soundcloud に対して最近感じていた不満

  • 本家ではリピート再生が(曲単位・プレイリスト単位ともに)できないのでつらい
  • SoundCloudRepeat.com もあるけど、決め打ちでリピート再生というよりかは、お気に入りのプレイリストを再生中に「今!今!これをリピートして!」みたいにもしたいし、プレイリスト単位でもリピートしたい
  • もっと欲を言えば、そのときの気分でお気に入りのプレイリストの内容を若干調整して再生したい(「今日はこの曲いらない!けどプレイリストからは消したくない!」みたいな)
  • もっともっと欲を言えば grooveshark 的な UI で再生したい

解決策としてつくったもの

repeat-beat β

一応まだ β バージョンということでスマホ対応はしておりません!悪しからず。。

基本的な使い方

  • 左にある検索フォームにキーワードを入力すると、それっぽいプレイリストがいくつか出てきます(注:検索、遅いです)
  • 各プレイリストの右についてる ↓ ボタンを押すと、そのプレイリストに含まれる曲が出てきます
  • 各曲の右についてる + ボタンを押すと、画面右のリストに曲が追加されます
  • 好きな曲を追加しまくります(同じ曲も入れられます)
  • 曲単位でリピートする(repeat song)かリスト単位でリピートする(repeat playlist)かを選びます
  • widget の外の再生ボタンで再生を開始します
  • もちろん、再生中にもリストの内容をいろいろいじれたりします

何でできているの?

AngularJS でできています。実装に関する話は 自分のブログ にそのうちまとめたいなあと思っています。

ソースコード

https://github.com/m0t0k1ch1/repeat-beat

蛇足

  • デフォルトで設定されている Jazztronik - Samurai(DJ Tatsu Remix Part3) は、最近イチオシの killer tune です
  • これイケてないよ!みたいなバグや仕様がありましたら、是非 @m0t0k1ch1 までお気軽にご連絡ください
  • 今後は youtube の音源とかも混ぜてリストを生成できるようにしたいです

最後に

明日の担当は、同じチームの先輩である @hisaichi5518 さんです!

おいしいごはんをたくさんおごっていただいたこと、プログラミングのご指導、細かなお気遣い、@hisaichi5518 さんには今年本当にお世話になりました。この場を借りてお礼を言わせていただきたいです。ありがとうございました!来年も同じチームとしてがんばりましょう!!自分も負けずに精進します。