NewAppleMusicPlayer:Electron でダイナミックアイランド付きのローカルプレイヤーを作る

NewAppleMusicPlayer は Electron 製のデスクトッププレイヤーで、ローカルの音楽を再生し、UI は Apple Music に寄せて作り、さらにダイナミックアイランド風のフローティングなミニプレイヤーを付けた。ベースは codecrafter-tl/musicplayer からの fork で、その上で UI とダイナミックアイランドのロジック一式を作り直している。

アプリ全体はウィンドウ2つだけ。メインウィンドウ index.html は再生・歌詞・波形・プレイリストを担当し、もう一つの electron-notch.html はフレームレスで透明、常に最前面のダイナミックアイランドのミニウィンドウで、画面最上部の中央に浮かんでいる。

一番手こずったのはマウスのクリック透過。ウィンドウは最前面かつ透明なので、処理しないと全体が下のものを塞いでしまう。preload.js は contextBridge で notchBridge.setMouseEventsIgnore を公開し、レンダラー側でマウスが実際のコンテンツ上にあるか判定して、IPC の toggle-mouse-events でメインプロセスに通知し setIgnoreMouseEvents を切り替える。空白部分はクリックが透過し、コンテンツ部分は通常どおり操作でき、解像度が変わると自動で再センタリングする。

再生まわりは複雑ではない。インポートは webkitdirectory でフォルダごと一括選択し、.mp3/.flac/.ogg に対応、メインウィンドウでは .mp4/.webm も再生できる。ローカルの .lrc 歌詞は自動でマッチしてスクロールし、メタデータとカバーは jsmediatags で読み、波形は Web Audio の AnalyserNode で描画、fftSize は 512。再生モードは順再生・逆再生・ループ・シャッフル、設定は localStorage に書き込み、設定ページは postMessage でメインウィンドウに更新を通知する。

技術選定は意図的に絞っている:開発時の electron と electron-builder を除けば、ランタイムの npm 依存はゼロ。jsmediatags と Font Awesome はソースをそのまま libs/ に入れ、フォントは SF Pro と PingFang を同梱している。npm run package は electron-builder で Windows x64 の NSIS パッケージを出力し、npm start はデフォルトでダイナミックアイランドのウィンドウだけを立ち上げる。メインウィンドウは純粋なフロントエンドなので、ブラウザで index.html をダブルクリックしても動く。

キーボードショートカット:スペースで再生/一時停止、左右矢印で5秒の早送り/巻き戻し、Ctrl+矢印で曲送り、Tab でプレイリストの開閉。ドラッグでの並べ替え、ライト/ダークテーマ、オンライン歌詞(NetEase Cloud)は追って補充していく。リポジトリは github.com/dwgx/NewAppleMusicPlayer、Bilibili にダイナミックアイランドのデモがある。