YouTube Music モダンUI(Apple Music風歌詞プレイヤー)

Tool

概要

YouTube_Music-Moden-UI は、YouTube Music の Web インターフェースを Apple Music のような歌詞表示付きプレイヤーに置き換えることを目的としたブラウザ拡張(ベータ)です。LrcLib と連携して LRC タイムスタンプに基づくリアルタイム歌詞同期を行い、プレイヤーバーやナビゲーションを半透明のガラスモーフィズム風に統一します。開発者モードで ZIP を展開して読み込む手順で利用でき、Immersion モードのオン/オフで操作性を切り替え可能です。現状はベータで既知のバグがあるため、自己責任での導入が推奨されます。

GitHub

リポジトリの統計情報

  • スター数: 43
  • フォーク数: 2
  • ウォッチャー数: 43
  • コミット数: 4
  • ファイル数: 2
  • メインの言語: 未指定

主な特徴

  • リアルタイム歌詞同期: LrcLib と連携して LRC タイムスタンプに合わせた滑らかな歌詞追従
  • ガラスモーフィズムUI: 半透明で浮遊感のあるプレイヤーバー/ナビゲーションのスタイル
  • 操作性: Immersion モードの切り替えで簡素表示と通常操作(キュー確認や検索)を両立
  • 開発者モード配布: Chrome の「拡張機能を読み込む(開発者モード)」で ZIP を展開して利用

技術的なポイント

本拡張は Web 拡張の典型的なアプローチで YouTube Music の既存 DOM に手を入れて外観と再生周りの挙動を差し替える設計と推測されます。歌詞同期は LrcLib を利用して LRC フォーマットのタイムコードをパースし、再生時間に合わせて表示行をスクロール・ハイライトする仕組みです。UI 側は CSS(ガラスモーフィズム用の半透明背景、フォント・影・ぼかし)で見た目を変更し、プレイヤーバーやナビゲーションのレイアウトをオーバーレイ/差し替えすることで Apple Music 風の体験を提供します。

実装上の注意点として、YouTube Music は SPA(単一ページアプリ)であるため、ページ遷移や DOM の差し替えに追随するために MutationObserver や再初期化ロジックが必要になります。また、拡張はコンテンツスクリプトで DOM に注入し、YouTube 側の再生イベント(HTMLMediaElement の currentTime/progress/pause/play 等)を監視して LrcLib のタイムライン進行と同期するのが自然です。Immersion モードでは UI のクリックイベントやフォーカス可能要素を抑制・復元することで「没入」表示と通常操作の切替を実現していると考えられます。

配布形式は ZIP を手動で展開して Chrome の開発者モードから読み込むため、Web Store 審査前の実験的配布です。これに伴い、拡張の権限宣言やマニフェストバージョン(MV2/MV3)の差異、オリジン間リクエストの制限、LRC データの取得元(ローカル同梱か外部フェッチか)による CORS やプライバシー考慮が重要になります。ベータ段階では互換性の変動や YouTube 側の DOM 変更で動作が破綻するリスクがあり、拡張更新時のメンテナンスコストも高くなる点に留意が必要です。

(上記は README の説明から推定した一般的な技術設計の解説で、実際の実装詳細は配布ファイル内を参照してください。)

プロジェクトの構成

主要なファイルとディレクトリ:

  • README.md: file
  • YouTube_Music.zip: file

使い方(簡易)

  1. リポジトリから YouTube_Music.zip をダウンロードして解凍。
  2. Chrome の拡張機能ページ(chrome://extensions)で「デベロッパーモード」を有効化。
  3. 「パッケージ化されていない拡張機能を読み込む」で解凍フォルダを選択して読み込み。
  4. YouTube Music を開き、拡張による UI 変更・歌詞同期を確認。問題がある場合は README の注意事項に従ってください。

まとめ

手軽に YouTube Music を Apple Music 風に変える実験的拡張。ベータのため導入は注意が必要。

リポジトリ情報:

READMEの抜粋:

YouTube Music Moden UI

YouTube Music の Web 版の再生UIをApple Music風の歌詞プレイヤーに変える拡張機能です。現状、ベータ版でバグがありますのでご了承ください。

特徴

  • リアルタイム歌詞同期(LrcLib)
  • ガラスモーフィズムUI
  • ImmersionモードOFFでキューや検索が可能

インストールは Chrome の開発者モードで ZIP を展開して読み込む方式です。