推しが配信で歌った楽曲を音楽アプリのように聴けるウェブサービスを自作した猛者が登場

推しのアーティストやYouTuber、VTuberがYouTubeなどで定期的に歌配信を行っていると、チャンネルに上がっている動画の数が多すぎるあまりに「あの曲が聴きたいけど、どの配信で歌ってたっけ？」となることがあります。聴きたい曲名で検索することで該当する配信の特定のタイムスタンプで自動的に再生してくれるシステム「歌枠検索」を、きさらずさんが自作して公開しています。

歌枠検索 | gozaru.fans
https://gozaru.fans/singing-streams

推しの歌配信を音楽アプリのように聴けるWebサービスを作ってみた
https://zenn.dev/qisarazu/articles/e8617817b4b365

きさらずさんが公開している「歌枠検索」は、きさらずさんの推しであるホロライブ6期生・風真いろはさんの歌枠を検索することができます。

今回は「プラチナ」を聴いてみるべく、画面上部の検索欄に「プラチナ」と入力して検索します。

すると、「プラチナ」が歌われた配信のリンクが表示されるので、クリック。

サムネイル上にある再生アイコンをクリックします。

すると、配信で「プラチナ」を歌ったタイミングから動画が再生されます。画面右側には歌われた楽曲のリストがずらりと並んでいるので、「うまぴょい伝説」をクリックしてみました。

すると、自動で配信が切り替わり、「うまぴょい伝説」を歌ったタイミングから再生されました。

歌枠は1つの配信に複数の楽曲が収録されている形になるので、歌枠検索の実現には楽曲名とタイムスタンプをまとめたデータベースが必要。きさらずさんによれば、データベースにはsupabaseを、クライアントのデータ管理にはswrを利用しているそうです。また、開発フレームワークはNext.jsで言語はTypeScriptだとのこと。

記事作成時点ではリストアップされた楽曲すべてがプレイリストに掲載されていますが、きさらずさんは今後カスタムプレイリスト機能も追加し、お気に入りの楽曲だけを流すことも可能になる予定だとしています。

なお、歌枠検索のソースコードはGitHubに公開されているので、自分の推しアーティストや推しVTuberで歌枠検索を作りたい人はチェックしてみてください。

GitHub - qisarazu/iroha-fansite
https://github.com/qisarazu/iroha-fansite