NewAppleMusicPlayer: A Local Player with a Dynamic Island, Built in Electron

NewAppleMusicPlayer is an Electron desktop player for local music, with a UI modeled on Apple Music plus a Dynamic Island-style floating mini player. It’s forked from codecrafter-tl/musicplayer, where I reworked the interface and the entire Dynamic Island logic on top.

The whole app is just two windows. The main window index.html handles playback, lyrics, the waveform, and the playlist; the other one, electron-notch.html, is the frameless, transparent, always-on-top Dynamic Island mini window that floats centered at the very top of the screen.

The trickiest part was mouse pass-through. The window is both always-on-top and transparent, so without handling it the whole thing blocks everything underneath. preload.js uses contextBridge to expose notchBridge.setMouseEventsIgnore; the renderer decides whether the mouse is over actual content, and notifies the main process via IPC toggle-mouse-events to toggle setIgnoreMouseEvents. Clicks pass through blank areas while content areas stay interactive, and it re-centers automatically when the resolution changes.

Playback itself isn’t complicated. Importing uses webkitdirectory to pick a whole folder at once; .mp3/.flac/.ogg all work, and the main window can also play .mp4/.webm. Local .lrc lyrics are auto-matched and scroll along, metadata and cover art are read with jsmediatags, and the waveform is drawn with Web Audio’s AnalyserNode at fftSize 512. Playback modes are forward, reverse, loop, and shuffle; the config is written to localStorage, and the settings page notifies the main window to refresh via postMessage.

The tech choices are deliberately restrained: aside from electron and electron-builder during development, there are zero npm runtime dependencies. jsmediatags and Font Awesome have their source dropped straight into libs/, and the fonts SF Pro and PingFang are bundled. npm run package runs electron-builder to produce a Windows x64 NSIS build; npm start by default only brings up the Dynamic Island window, the main window is pure front-end, and you can also run it by double-clicking index.html in a browser.

Keyboard shortcuts: space to play/pause, left/right arrows for 5-second seek forward/back, Ctrl+arrows to switch tracks, Tab to toggle the playlist. Drag-to-reorder, light/dark themes, and online lyrics (NetEase Cloud) are coming gradually. Repo: github.com/dwgx/NewAppleMusicPlayer, with a Dynamic Island demo on Bilibili.