2014/08/24

La MusicaというYouTube Music Player作りました



一ヶ月以上前ですが、La MusicaというYouTube Player作りました。
音楽をずっと聞きっぱなしにできる作業用BGMが欲しかったので、開発しました。
音楽系のWebサービスのLast Fmが公開しているAPIを使えば、アーティストの情報など豊富な情報を取得できるAPIがあるので、比較的容易に開発できます。

使い方〜How To Use
アーティスト名を入れてplayボタンを押すだけ、
あとは自動的にアーティストの音楽がランキング順に流れます。

■一曲をリピートしたい時
・画面左リピートボタンを使用してください。

■Biographyの欄
アーティスト情報の表示

■Similarの欄
似ているアーティストの表示とリンククリックで、自動再生

■画面左Trend
人気アーティストTOP10のリンククリックで、自動再生

■取得する動画数を増やしたい
・デフォルトで20個に設定しているので、
増やしたいもしくは少なくしたい場合は、「set number」に
数字を入力してください。

静的なページのみの作成なので、GitHub pagesの使用で、無料です。
※アーティストから絞ったアマゾンの商品取得だけ、サーバサイドでGAEを使用してます。(GAEはリクエスト過多の場合、課金)

以下使用技術です。
(静的ページのみのホスティング)

FrontEnd
jsのMVWフレームワーク
■jQuery
■typeahead.js
オートコンプリート検索付きプルダウンリスト

WEB API
■Last fm
・曲のランキングの取得
・アーティスト情報の取得(類似アーティストなど)
・最新チャートのTOP10アーティスト取得

■YouTube Data API
・動画検索、取得(不要なものを除き、結果をランキング順にソート)
■YouTube JavaScript Player API
・動画プレイヤーの制御(連続自動再生、連続リピート)
■Amazon Product Advertising API 
・Amazonからアーティストのアルバム商品をひっぱってくる。

■GAE(Google App Engine)
GAEをAmazon Product Advertising APIを使うためだけに使用。
jsでAPI叩く方法が見当たらない(プラス、awsのkeyを公開したくないなどもろもろ)

ソースはGithubで公開してます。

La Musica Music Player

24時間好きな音楽聞き放題、あなたのミュージックライフを楽しませるツールです「Lamusica」 開発者インタビュー