おはようございます。まさきんです。
家ではSonosで音楽を流すことが多いです。ただ、J-POPを一緒に歌おうとすると歌詞がわかりません。そこで今朝、歌詞を画面に出すアプリを作ってみました。Claudeと相談しながらの作業です。
※記事公開時点の情報です。最新の条件は公式サイトでご確認ください。
- Sonosで再生中の曲に合わせて、今の行がスマホで光るアプリを作りました
- Sonosの情報は、家のMacから直接読んでいます
- 歌詞は無料の公開データベース「LRCLIB」から取っています
- 家族への配布はTailscaleで、追加の費用は0円でした
- 相談を始めてから妻のiPhoneで動くまで、朝の約2時間でした
作ったもの
スマホで開くと、Sonosで流れている曲の歌詞が出ます。今歌っている行が白く光ります。画面は自動でスクロールして、今の行を中央に置いてくれます。
いくつか、使ってみて便利だった機能もあります。
- 行をタップすると、Sonosがその行の頭から再生し直す
- ずれる曲は「早く/遅く」で0.3秒ずつ直せて、曲ごとに覚える
- 別の版の歌詞に「候補」から切り替えられる
- 部屋ごとに別の曲を流していても、部屋を選べる
- ホーム画面に置けて、表示中は画面が消えない
行のタップは思った以上に便利でした。「サビだけもう一回」がすぐできます。歌の練習にも使えるかもしれません。
きっかけは「作れるかな」の一言
朝6時40分ごろに、Claudeに「作れるかな」と聞いたのが始まりです。最初に確認されたのは、どこで音楽を再生するかでした。
答えはSonosです。家の中で使うことと、Macは常に起動していることも伝えました。この2つで、仕組みの形がほぼ決まりました。
聴くのはJ-POPが多いことも話しました。これが歌詞の取り先を選ぶ決め手になっています。最初に「どこで」「何を」を決めると、話が早いと感じました。
仕組みの全体像
仕組みは3つの部品でできています。
- Sonos本体(家のネットワークの中)
- 家のMacで動く小さな中継サーバー
- スマホで開く画面(PWA)
Macの中継サーバーが、Sonosから曲名と再生位置を読みます。同時に、歌詞のデータベースから時刻つきの歌詞を取ってきます。スマホはMacに「今どこ?」と1秒ごとに聞いて、光らせる行を決めます。
中継サーバーは、外部のパッケージを使わずに書いてもらいました。Mac側で入れたものはありません。家で動かすなら、部品が少ないほど安心かなと思います。
Sonosは家の中から直接読む
Sonosには、公式のクラウドAPIもあります。ただ、開発者登録やログイン連携の準備が要ります。
| 読み方 | 準備 | 動く場所 | 向いている使い方 |
|---|---|---|---|
| 公式のクラウドAPI | 開発者登録・ログイン連携 | どこからでも | 外出先から操作したい |
| 家の中から直接 | ほぼ不要 | 家のネットワークの中 | 家の中だけで使う |
今回は家の中で使うので、直接読む方法にしました。Sonosは家のネットワークの中で、曲名や再生位置を教えてくれます。家には5台ありますが、自動で見つけてくれました。
部屋をまとめて再生している「グループ」も、そのまま読めます。なので、部屋ごとに別の曲を流していても選べます。
歌詞はLRCLIBから取る
歌詞には、時刻がついているものが必要です。「この行は1分23秒から」という情報ですね。こうした形式はLRCと呼ばれます。
候補をいくつか比べました。
| 取り先 | 費用 | J-POPの時刻つき歌詞 | 使いやすさ |
|---|---|---|---|
| LRCLIB | 無料 | 有名な曲はかなりある | APIキーなしで引けた |
| 音楽配信サービスの歌詞 | 契約による | 充実している | 個人向けの窓口がない |
| 日本の歌詞サイト | 無料で見られる | 充実している | 個人向けの窓口がない |
LRCLIBは、有志が集めている公開のデータベースです。J-POPがどれくらいあるか、実際に何曲か試しました。
- 米津玄師、YOASOBI、Official髭男dism、Vaundy、Mrs. GREEN APPLEは時刻つきがあった
- スピッツ、優里、Creepy Nutsも時刻つきがあった
- 曲名の完全一致で見つからない曲も、あいまい検索で見つかった
- 童謡は見つからないものがあった
家族で聴く有名どころなら、かなりの割合で足りそうです。見つからない曲は、自分でLRCファイルを置けば使える形にしてもらいました。
ローマ字の曲名でつまずいた
作ってすぐに、困ったことが起きました。表示された歌詞が、ローマ字だったのです。
原因は、再生していたYouTube Musicの曲情報でした。アーティスト名が「Aimyon」や「Kenshi Yonezu」のように、ローマ字で届きます。そのまま探すと、ローマ字の歌詞が選ばれてしまいました。
そこで、歌詞の中の日本語の割合を点数に入れてもらいました。かなや漢字が多い版を優先する形です。アーティスト名のローマ字と日本語の違いは、減点しないようにしました。
曲名の工夫もあります。「ただ声一つ - One Voice」のように、英語の副題がつく曲があるからです。副題や括弧を外した名前でも探すようにしています。
- 日本語の版に訳詞が混ざっていると、ローマ字の版が選ばれることがあります
- 米津玄師さんの「Lemon」がこのパターンでした
- そんなときは画面の「候補」から、別の版に切り替えられます
1秒未満にそろえる工夫
もう1つの課題は、タイミングのずれです。Sonosが教えてくれる再生位置は、秒の単位で切り捨てた数字です。そのまま使うと、最大で1秒ずれます。
歌詞の1秒は意外と大きいです。行が変わるのが遅れると、歌い出しに間に合いません。
そこで、少しだけ工夫してもらいました。本当の位置は「返ってきた秒」と「その1秒後」の間にあるはずです。画面側で進めている予測を、その範囲に収め続けます。
1秒ごとに聞くうちに、範囲がだんだん絞られていきます。テストでは、ずれは0.5秒以内に収まりました。仕組みがわかった瞬間は、ちょっと気持ちよかったです。
スマホで使うにはHTTPSが要る
最初は、家のネットワークの中でそのまま開いていました。動きはしたのですが、2つ困りました。
- ホーム画面に置いても、アプリのように開かない
- 歌っている途中で、画面が暗くなる
どちらも、HTTPSで開いたページでないと使えない機能でした。画面を消さない機能(Wake Lock)は、安全な接続が前提になっています。
ここで役立ったのが、もともと入れていたTailscaleです。Tailscaleの「serve」という機能で、Macのサーバーに正しい証明書つきのURLがつきました。IPアドレスを固定する必要もなくなります。
家の中の仕組みは、いつも通信の上で動いています。家族のスマホで使う仕組みが増えるほど、回線の中身も気になってきますね。
家族に配るならTailscale
妻にも使ってもらいたかったので、配り方を考えました。
| 配り方 | 相手がやること | 使い勝手 | 気になる点 |
|---|---|---|---|
| 家のWi-Fiで直接開く | なし | 画面が消える・アプリにならない | 家の外では使えない |
| Tailscaleに招待 | アプリを入れてログイン | アプリとして使える | VPNアプリが1つ増える |
| 公開URLにログインをかける | 初回にメールで認証 | アプリとして使える | 設定の手間が増える |
妻は他のアプリもTailscale越しに使う予定なので、招待する形にしました。Tailscaleの個人向けの無料プランは、6人まで使えます。家族で使うには十分ですね。
妻のiPhoneでの手順は、次の4つだけでした。
- 招待リンクを開いて、アカウントを作る
- App StoreでTailscaleを入れて、同じアカウントでログインする
- 「VPN構成の追加」を許可する
- SafariでURLを開いて、ホーム画面に追加する
妻のiPhoneから見えなかった理由
手順どおりに進めたのに、妻のiPhoneからMacが見えませんでした。Tailscaleのアプリは「接続中」になっています。ただ、見えている端末が自分の1台だけでした。
管理画面を見ると、端末の状態に「Owner needs approval」と出ていました。端末ではなく、ユーザーの承認待ちだったのです。
公式の説明では、2025年5月22日以降に作ったtailnetはユーザー承認が最初から有効です。承認前のユーザーは、Tailscaleにはつながります。ただ、他の端末とは通信できません。
管理画面の「Users」で承認したら、すぐに見えるようになりました。家族を招待するときは、ここを覚えておくとよさそうです。
Macで動かし続けるための小ネタ
中継サーバーは、Macの常駐の仕組み(launchd)で動かしています。落ちても自動で立ち上がる設定です。
1つだけ、わが家のルールがあります。launchdで直接プログラムを起動すると、書類フォルダが読めずに落ちることがあります。なので、シェルを経由して起動する形にそろえています。
今回もClaudeが最初は直接起動の形で書きました。わが家のチェックの仕組みが気づいて、すぐに直してもらえました。家のルールを文書にしておくと、AIとの作業でも効くと感じています。
かかった費用と時間
| 項目 | 内容 |
|---|---|
| 追加の費用 | 0円 |
| Sonosの読み取り | 家の中から直接(登録不要) |
| 歌詞 | LRCLIB(無料) |
| 家族への配布 | Tailscaleの無料プラン |
| 所要時間 | 朝6時40分に相談→9時ごろ妻のiPhoneで動いた |
Macは、もともと常に起動しているものを使っています。新しく買ったものはありません。
向いている人・向いていない人
向いていそうなのは、次のような家庭です。
- Sonosで音楽を流していて、家族で歌うことが多い
- 家に常に起動しているMacやPCがある
- Tailscaleを使っている、または使ってみたい
一方で、向いていない場合もあります。
- 家に常に起動しているパソコンがない
- テレビや外部入力の音をSonosで流すことが多い(曲名が届かないため歌詞が出ない)
- 童謡や、あまり知られていない曲を聴くことが多い
- 家に常に起動しているMacかPCがある
- Sonosで音楽配信サービスの曲を流している
- 家族のスマホにアプリを1つ入れてもらえる
- 歌詞が見つからない曲は自分で用意する覚悟がある
よくある質問
Q. プログラミングの知識は要りますか?
今回は、コードはすべてClaudeに書いてもらいました。ただ、Macのターミナルやlaunchdの考え方がわかると安心です。つまずいたときに、どこが悪いかを一緒に考えやすくなります。
Q. SpotifyやApple Musicでも使えますか?
Sonosで再生していれば、曲名と再生位置はSonosから取れます。なので、配信サービスの種類はあまり関係ないはずです。僕が試したのはYouTube Musicだけです。
Q. 歌詞が見つからない曲はどうなりますか?
画面に「歌詞が見つかりませんでした」と出ます。「候補」から別の版を探し直せます。それでもなければ、自分でLRCファイルを置けば次から使えます。
Q. 家の外からも使えますか?
Tailscale越しなら、外出先からも開けます。ただ、表示されるのは家のSonosで流れている曲です。外で聴いている曲の歌詞が出るわけではありません。
Q. 歌詞のタイミングがずれるときは?
画面下の「早く/遅く」で、0.3秒ずつ直せます。直した量は曲ごとに覚えるので、次からはそのままです。
Q. iPhoneでも画面が消えないようになりますか?
HTTPSで開いていれば、最近のiOSなら効くはずです。古いiOSでは、ホーム画面から開いたときに効かないことがあります。iOSは最新にしておくと安心です。
Q. 月額の費用はかかりますか?
わが家の場合は0円でした。LRCLIBは無料で、Tailscaleは個人向けの無料プランの範囲です。Macの電気代くらいかなと思います。
参考にした公式情報
- LRCLIB(時刻つき歌詞の公開データベース)
- LRCLIB APIドキュメント
- Tailscale serve(tailnet内にサービスを公開する機能)
- Tailscale HTTPS証明書の有効化
- Tailscale ユーザー承認
- Tailscale 料金プラン
- MDN Screen Wake Lock API
- Sonos 開発者向けドキュメント
家の自動化の話は、ほかにも書いています。Cloudflare Workersの無料枠でCronが足りなくなったときや、学校のお知らせを家のサイネージに出す仕組みもあわせてどうぞ。
まとめ
「作れるかな」から始めて、朝の2時間で家族が使えるところまで来ました。むずかしかったのは、ローマ字の曲名とタイミングのずれくらいです。どちらも、実際の曲で試しながら直せました。
歌詞を追いながら家族で歌えるのは、思っていた以上に楽しいです。Sonosがある家なら、試してみる価値はあるかもしれません。
本記事にはアフィリエイト広告を含みます。当サイトのリンクを経由して商品・サービスへお申し込みいただいた場合、提携先企業から成果報酬を受け取ることがあります。 また、運営者は楽天グループに所属する社員であり、紹介プログラムを通じた報酬を受け取る場合があります。記事内容・評価は広告の有無にかかわらず、運営者の実体験と調査に基づき作成していますが、 上記の関係性をご理解のうえお読みください。詳しくは免責事項・アフィリエイト表記をご覧ください。
楽天モバイルの通信エリア・電波状況について気になることがある方は、公式の電波改善・調査依頼フォームからご相談いただけます。