Re:play

「今いる場所と、その瞬間の空模様に合う音楽」を自動で届ける、コンテキスト連動型の音楽プレイヤーです。

端末の位置情報から現在地の天気・地域名・現地時刻を取得し、「雨の夕方」「晴れた朝」といった状況に応じた検索キーワードを生成。Audiusの公開楽曲から再生可能な曲を選び、ユーザーの環境に合った音楽を提案します。

通常のボタン操作だけでなく、指を鳴らして再生・一時停止を切り替えたり、カメラに向かって親指を上げる・下げることで曲をGood／Badへ分類したりできる点も特徴です。音楽との出会いを、検索中心の操作から、場所・天気・身体動作を含む体験へ広げることを目指しました。

使いかた

ホーム画面を開いて位置情報を許可すると、現在地の地域名、天気、現地時刻が表示されます。自動再生モードでは、天気と時間帯から生成した複数の検索条件をもとに楽曲候補を取得し、順番に再生します。

再生・一時停止、前後の曲への移動、シーク操作に加え、指を鳴らす音でも再生状態を切り替えられます。曲に対してGood／Badを選択すると専用リストに保存され、あとからまとめて聴き直せます。カメラを許可した場合は、親指を上げる・下げるジェスチャーでも評価できます。

検索画面では、曲名やアーティスト名による検索と音声入力に対応しています。検索結果からすぐに再生できるほか、ログイン後は任意のプレイリストへ追加できます。

マイページでは、Googleログインまたはメールアドレスによる登録・ログイン、パスワード再設定、ログアウトが可能です。作成したプレイリストでは、最大30曲までの追加、再生順の変更、曲の削除、プレイリスト自体の削除を行えます。

主な機能

• 現在地・天気・現地時刻に応じた楽曲レコメンド
• Audius APIを利用した楽曲検索、ストリーミング再生
• 再生、一時停止、シーク、前後の曲への移動、自動連続再生
• Web Speech APIを利用した音声検索
• Web Audio APIによる指鳴らし音の検出
• MediaPipeによるThumb Up／Thumb Downジェスチャー認識
• Good／Badした曲の保存と一覧表示
• Firebase AuthenticationによるGoogle・メール認証
• ユーザー別プレイリストの作成、曲追加、並べ替え、削除
• LeafletとOpenStreetMapを利用した地図上のエリア指定
• スマートフォンとデスクトップに対応したレスポンシブUI

実装優先度

技術構成

フロントエンドにはReact 19、TypeScript、React Router 8のFramework Mode、Viteを採用しています。スタイリングにはCSS ModulesとTailwind CSS、アイコンにはLucide Reactを使用しています。

React Routerを採用した経緯は以下の記事にまとめました。 https://zenn.dev/burikitdaikon/articles/react_router_env

ブラウザ機能としてGeolocation API、Web Speech API、Web Audio API、MediaDevices API、HTMLAudioElement、Local Storage、Intl APIを活用しています。外部サービスにはAudius、Open-Meteo、BigDataCloud、Firebase Authenticationを利用し、地図表示にはLeaflet／React Leaflet、画像認識にはMediaPipe Tasks Visionを採用しました。

バックエンドはGo、Echo v5、PostgreSQL 17、pgxで構築しています。Firebase Admin SDKでIDトークンを検証し、認証済みユーザーとプレイリスト情報をPostgreSQLに保存します。 開発・運用環境にはDocker、Docker Compose、Render、GitHub Actionsを採用。フロントエンドではVitest、ESLint、TypeScriptの型チェック、バックエンドではユニットテスト、PostgreSQLを使った統合テスト、静的解析、race detector、DockerビルドをCIに組み込んでいます。