MASATO NASU

Tools

Apps, prototypes, and utilities built for actual use.

LyricsPocket

LyricsPocket

#PWA#Lyrics#English#Vibe Coding

端末にある 音源ファイル(mp3 / m4a など)を再生しながら、歌詞ファイル(.lrc / .txt)を表示できる、完全クライアント側の軽量アプリ(PWA)です。 歌詞中の英単語はワンタップで TANGO-CHO に渡して、単語帳/学習に回せます。 Demo: https://masato-nasu.github.io/LyricsPocket/ 対応: PC(Chrome/Edge/Safari) / iPhone(Safari・PWA) / Android(Chrome・PWA) 重要: 音源・歌詞は 配布しません。ユーザーが所有/許諾を得たファイルを端末から選択して使う前提です。 PWAのインストール(ホーム画面に追加) LyricsPocket はブラウザでそのまま使えますが、PWAとしてインストールすると、ホーム画面(またはデスクトップ)にアイコンが追加され、アプリのように全画面で起動できます(中身はWebアプリです)。 iPhone / iPad(Safari) Safariで Demo を開きます ※XやLINE等のアプリ内ブラウザだと「ホーム画面に追加」が出ないことがあります。可能ならSafariで開いてください。 画面下の 共有(□↑) を押す 「ホーム画面に追加」 を選ぶ 名前を確認して 追加 ホーム画面のアイコンから起動(以後はアプリのように使えます) Android(Chrome) Chromeで Demo を開く 右上の ︙(メニュー) を開く 「アプリをインストール」(または「ホーム画面に追加」)を選ぶ 画面の案内に従って インストール PC(Chrome / Edge) Chrome / Edge で Demo を開く アドレスバー右端の インストールアイコン(表示される場合) もしくは 右上 ︙(メニュー)→「アプリ」→「このサイトをアプリとしてインストール」 インストール後は、独立したウィンドウで起動できます(タスクバー/スタートメニューにも登録可能) 更新について(ざっくり) 通常は、起動時に自動で最新版に更新されます(キャッシュ更新)。 もし表示が古いままの時は、いったん完全に閉じてから再起動、またはブラウザのキャッシュ削除/再インストールをお試しください。 できること / Features 🎵 音源再生:端末内の mp3 / m4a / aac / wav / flac / ogg 等を読み込み再生 📝 歌詞表示 LRC(タイムタグ付き):再生位置に合わせて「現在行」をハイライト(※画面は勝手にスクロールしません) TXT(プレーンテキスト):文章として表示(同期なし) 🇯🇵 日本語訳(任意) JP: ON で、英文の直下に日本語訳を表示 翻訳はオンライン(MyMemory)を利用するため ネット接続が必要 です ※環境によって CORS / 回数制限等で失敗することがあります(その場合は「Google翻訳へ」の導線が出ます) ※このリポジトリの現行版は DeepL は使用していません(誤記防止のため、DeepLに切り替えた場合のみREADMEに明記するのが安全です) 📚 TANGO-CHO連動 歌詞中の英単語をタップ → TANGO-CHO に渡して単語帳化できます PC:単語タップで TANGO-CHO が新しいタブで自動で開きます(同時に単語はクリップボードにもコピー) iPhone(Safari / ホーム画面PWA):単語は クリップボードに“単語のみ”コピー → TANGO-CHO 側で貼り付け まず準備するもの(初心者向け) LyricsPocket 自体は「Webページ」なので、アプリ用のファイルと、使うときに読み込む 音源/歌詞ファイルの2種類を用意します。 1) 音源ファイル(AUDIO) 例:Artist - Title.m4a / Artist - Title.mp3 DRM(保護)付きの楽曲(例:ストリーミングのダウンロード楽曲)は、ブラウザから選べない/再生できない場合があります → 自分で用意した通常の音声ファイルを使ってください。 置き場所のおすすめ iPhone / iPad:ファイルアプリ内にフォルダを作るのが確実 例)ファイル > このiPhone内 > LyricsPocket > audio Android:Download など分かりやすい場所に 例)Download/LyricsPocket/audio PC:任意(後で選べればOK) 2) 歌詞ファイル(LYRICS) .lrc(タイムタグ付き)または .txt(プレーンテキスト)を使えます。 例:Artist - Title.lrc / Artist - Title.txt LRC(同期できる歌詞)の書式 基本はこの形です: [00:12.34] Midnight rovers [00:15.80] City slickers [00:19.10] Gunmen and maniacs [分:秒.ミリ秒] の形式([01:23.45] など) 1行に複数のタイムタグがあってもOK(一般的なLRC仕様に対応) TXT(同期なし歌詞) タイムタグが無い普通のテキストでも表示できます(同期ハイライトはしません)。 3) ファイル名(曲と歌詞の“自動一致”のコツ) LyricsPocket は、音源ファイル名と歌詞ファイル名を見て自動で対応付けようとします。 うまく一致させるコツは: 曲名のベースを同じにする ✅ Massive Attack - Safe From Harm.m4a ✅ Massive Attack - Safe From Harm.lrc 余計な装飾(リマスター表記など)が多い場合でも、ある程度は自動で吸収しますが、 最初はシンプルに揃えるのが確実です。 もし自動で一致しない場合でも、画面下の LYRICS から手動で選べます。 一度手動で選ぶと、その対応が端末に保存され、次回から自動で出やすくなります。 使い方 / How to use(ユーザー向け) 画面上部の AUDIOを選ぶ を押して、音源ファイルを選択 複数選択できます(PCは Shift / Ctrl など。スマホは機種により挙動が異なります) LYRICSを選ぶ を押して、.lrc または .txt を選択(複数OK) PLAY で再生 LRCの場合:再生位置に合わせて現在行がハイライトされます ※再生に合わせて 画面が勝手にスクロールはしません JP: ON で日本語訳を表示(ネット接続が必要) 英単語(WORDS)をタップして TANGO-CHO へ送る PC:単語タップで TANGO-CHO が新しいタブで自動で開きます(同時に単語はコピーされます) iPhone:単語はコピーされるので、TANGO-CHO 側で貼り付けて取り込みます PCで単語クリック → 新しいタブでTANGO-CHOを開く PC(Chrome / Edge など)では、英単語をクリックすると TANGO-CHO が新しいタブで自動で開きます。 もし開かない場合は、ブラウザの ポップアップブロックが原因です。masato-nasu.github.io のポップアップを許可すると以後は動きます。 単語は同時にクリップボードにもコピーされるため、必要なら手動貼り付けも可能です。 iPhoneで単語をTANGO-CHOへ渡す方法(コピー → 貼り付け) iPhone(Safari / ホーム画面PWA)では、LyricsPocketは 英単語をタップするとクリップボードに“単語のみ”コピーします。 LyricsPocketで、下の WORDS チップ、または歌詞中の 英単語 をタップ 画面下に COPIED(TANGO-CHOで貼り付け) などが出たらコピー完了 TANGO-CHO を開く(SafariでもPWAでもOK) TANGO-CHO側の 「貼り付け」 ボタン、または入力欄を長押し→貼り付け 取り込み→保存 貼り付けできないときは、同じ単語をもう一度タップして再コピーしてから試してください(iOSの初回挙動でまれに不安定な場合があります)。 曲と歌詞が一致しないとき(手動で合わせる) まず TRACKS から曲を選ぶ 次に LYRICS 一覧から該当の歌詞を選ぶ 著作権・取り扱い(重要) 本アプリは 音源や歌詞(LRC/TXT)を配布しません。 利用者が所有/許諾を得たファイルを端末から選択して使う前提です。 LRC は形式(タイムタグ)自体ではなく、入っている「歌詞本文」が著作物になり得ます。 そのため、歌詞本文を含む LRC/TXT を 第三者に配布・公開(GitHub/Dropbox/SNS等へアップ)しないでください。 自分で作成した LRC であっても、歌詞本文を含む場合は 私的な範囲での利用に留め、共有が必要な場合は権利者の許諾や正規のライセンスに従ってください。 スクリーンショットに歌詞を載せる場合も、全文掲載は避け、必要最小限の引用に留めてください。 利用者が所有/許諾を得たファイルを読み込む前提です。 歌詞の取り扱いは、各地域の法令・利用規約・権利者の条件に従ってください。 免責 本アプリの利用により生じたいかなる損害についても、作者は責任を負いません。