SoundCloud APIでちょっと便利なプレーヤをつくる（１）

今回は、SoundCloudという面白い音楽サイトで公開されているAPIを使って自作の機能を追加した音楽プレーヤを作ってみました。

SoundCloudとはなんだ？という人はこちらを読めば楽しさが伝わるかと思います。

• 音楽を「探して」「聴いて」「共有する」！！SoundCloudの楽しみ方 | jMatsuzaki
• SoundCloudでアイドルRemix聞いてまわるの楽しすぎる - インターネットもぐもぐ

どんな機能を追加するか

　今回は公式として用意されている”セット”をより使いやすいものにします。iTunes等で言えばプレイリストの機能になります。本家で提供されている”セット”はiPhoneアプリでは聞くことができません。せっかく作った最高のミックステープをiPhoneで聞けないなんて…！これも改善したいポイントです。

言語は

　SoundCloud APIはさまざまな言語で使用することが可能です。本家のDevelopersページを見ていただければわかると思いますが、Ruby、PHP、Python、JavaScriptを始めとしてiPhoneアプリに使用することもできます。今回は、単純なプレイリスト付きプレーヤの開発を目指しますのでどの言語でも対応できるのですが解説が豊富でiPhoneのブラウザからも利用できそうなJavaScriptを選択しました。

開発前の下準備

　今回はウィジェットの機能を拡張することでプレイリスト機能付きのプレーヤを実現します。公式で用意されているSoundCloud Widget API Playgroundというページを参考にしました。このページではウィジェットに関する関数が沢山使われています。これらの関数を使うために自分の作るページにapi.jsというファイルを追加します。

具体的には

<script type="text/javascript" src="api.js"></script>

と記述すれば良いです。

このファイルはhttps://w.soundcloud.com/player/api.jsから取得することができます。

β版公開！

　完成したプレーヤは現在http://monitorgazer.web.fc2.com/http://iitani.com/scp/scp.htmlで公開中です。今後は曲送り機能とプレイリストの保存と共有、ランキング機能を実装したいと思っています。iPhoneでは、Chromeブラウザで動作確認しました。

現状

　現状のシステムとしてはHTMLのテキストエリア要素に曲のURLを貼り付けると順に再生するようになっています。また、プレイリストのリピート機能、一曲リピート機能、プレイリスト無限シャッフル機能がついています。

現状での便利な使い方

　個人的に実装できてよかった一番便利な機能は一曲リピート機能だと思っています。ある曲にハマると永遠とリピートして聞くのですが、SoundCloudにはそのような機能がなかったので便利に使っています。

　プレイリストはページをリロードするたびに初期値に戻ってしまうので、Evernoteなどにプレイリストを書きだしておいて、簡単にコピペできるようにするのが良いと思います。そうすればiPhoneでも便利に使えるはずです。今はプレイリストを作成するのに曲のURLを調べる作業に一手間かかるため、改良の余地が有りそうです。

実装過程

　需要はあまりないかもしれませんが次回以降のエントリで書きたいと思います。

追記（2013/03/13）
　ブラウザはChromeを推奨しています。他にも要望があれば適宜対応する予定です。iPhone,nexus7にて動作確認を行ったところ音楽の再生にユーザアクションが必要という制約のため自動再生が動作しないことを確認しています。曲の切り替えはできますが自動再生に対応しておりません。改善を行なっていく予定です。