NewAppleMusicPlayer:Electron 撸个带灵动岛的本地播放器

NewAppleMusicPlayer 是个 Electron 桌面播放器,放本地音乐,界面照着 Apple Music 做,外加一块灵动岛样式的悬浮迷你播放器。底子 fork 自 codecrafter-tl/musicplayer,我在上面重做了界面和整套灵动岛逻辑。

整个应用就俩窗口。主窗口 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 和苹方。npm run package 走 electron-builder 出 Windows x64 的 NSIS 包,npm start 默认只拉灵动岛窗口,主窗口是纯前端,浏览器双击 index.html 也能跑。

键盘快捷键:空格播放暂停,左右方向键 5 秒快进快退,Ctrl+方向切歌,Tab 开关播放列表。拖拽排序、深浅主题、在线歌词(网易云)慢慢补。仓库 github.com/dwgx/NewAppleMusicPlayer,B 站有灵动岛演示。