ContextDJ - AI Music Curator: 曖昧なリクエストをAIがプレイリスト化してくれる、Spotifyと連携するウェブアプリを作ってみた

Diary
ContextDJ - AI Music Curator: 曖昧なリクエストをAIがプレイリスト化してくれる、Spotifyと連携するウェブアプリを作ってみた
Page content

私のコンテキストから適当に選曲してほしい

音楽を聴こうとして、そのときの気分に沿うキーワードを考えて、Spotifyの検索欄に打ち込もうとした時に、気づいた。ここにAIを介在させたらちょっと面白いんじゃない？

思いついたらプロトタイプをすぐに作れてしまうのが、昨今のAIの脅威です。いわゆるバイブコーディングをGoogle Antigravityとし始めて、とりあえず自分向けにCLI版 (Python製) を作成してみたものの、これじゃ誰も使わないだろうなと再考してCLI版を没にし、ウェブアプリ版に仕立て直しました。

このアプリが理想とする姿は、“曖昧だったり無茶振りだったりするユーザのコンテキストを理解するDJ”なので、名前は「ContextDJ」としました。誰もがすぐに使えるサイトを立ち上げ、ソースコードをGitHubに公開したのでご紹介です。

ContextDJの使い方

最初に初期設定をします

  1. ContextDJのサイト https://contextdj.remoteroom.jp/ を開くと初回は次のようなトップ画面です。設定手順がチェックリストとして案内されるようにしています。
  2. 設定チェックリスト内のSettings (または右上の歯車アイコン) をクリックするとSettings画面に遷移します。ここで必須入力なのは「Spotify Client ID」と「AI API Key」の設定です。それぞれ、入力欄の下の説明文にあるリンク先 (Spotifyと、OpenAIまたはGoogle) で作成して、各文字列を入力欄に貼り付けてください。最後にページ最下部の保存ボタンを押して設定を保存します。
  3. トップ画面に戻ると、Spotifyへの「Login」ボタンが現れているはずです。Loginボタンを押して、ご自身のSpotifyとContextDJを連携させてください。

好きな言葉でリクエストを出します

  1. 画面上部のリクエスト欄に、気分に応じたリクエストを好きな言葉 (自然言語) で入力して、紙飛行機アイコンをクリックまたはEnterキーを押してください。左のマイクアイコンで音声入力も可能です。最低限、聴きたい音楽をAIが推測できるような言葉は必要です。また、スケジュールと判断できる情報が含まれていると、プレイリストがスケジュール枠にセットされます。
  2. AIがリクエストを解釈できれば、AIがSpotifyに検索クエリーを発行してプレイリストが生成されます。その後、Spotifyを開いているデバイスでの再生が始まります。
  3. AIによりよい選曲をさせるために、自分の嗜好をあらかじめ設定しておくことができます。Settings画面の「Personal Preferences」欄に、好みの音楽ジャンルなどを入力しておいてください。

備考

  • ContextDJはPWA化に対応しています。スマホのブラウザにて「ホーム画面に追加」をすると、一般的なアプリのように使えます。
  • 作者は、Google Geminiを主に使っています。AIとしてOpenAIを選択した場合、動くとは思いますが、ほとんどテストできていません。

まとめ・雑感

現段階のContextDJの特徴となる部分は、おそらく「ユーザが自由入力するリクエストを、良い感じに解釈して、Spotifyの検索クエリーに変換する」ところです。裏では、「前提条件をいろいろ追加してSpotify検索用クエリーを作るプロンプトを準備してそれをAIに投げる」という処理を行っています。自然言語からのこのような高度な変換は、いわゆるAIパワーがあってこそできるものだなと、作ってみて実感しました。

なお、Spotifyから取得したプレイリストを、再度、AIを用いて「もう少し良い感じになるように」精査してもらうというアイデアもありますが、まだやっていません。次の改造でこのアイデアを実装するかもしれません。

参考情報

ContextDJのこのアイコンも、AIに「このアプリの内容に合う、kawaiiものを」と指示して作ってもらいました。