任务栏歌词终极指南:三步让 Windows 11 任务栏替你唱出网易云歌词
任务栏歌词终极指南三步让 Windows 11 任务栏替你唱出网易云歌词【免费下载链接】Taskbar-LyricsBetterNCM插件在任务栏上嵌入歌词目前仅建议Windows 11项目地址: https://gitcode.com/gh_mirrors/ta/Taskbar-Lyrics写代码正上头音乐切到副歌你想瞄一眼歌词却得 AltTab 切回网易云、再切回来——一次两次忍了一天十几次就真的烦了。浮动歌词窗口又总是挡住代码、挡住表格、挡住本该聚焦的视线。Taskbar-Lyrics 这款 BetterNCM 插件把歌词直接嵌进 Windows 11 任务栏歌词和进度条抢地盘不它和你的任务栏共用一块屏幕不占任何额外空间。这篇文章会带你从零上手从编译原生模块到玩出个性化配置最后聊两句它背后的设计巧思。 第一幕那个被歌词打断的下午下午三点你正盯着一个刚跑起来的构建日志耳机里放着新歌副歌的歌词在脑子里若隐若现——你真的很想看一句。于是你切换到网易云盯两秒切回来发现刚才的报错位置找不到了。这就是桌面歌词最常见的尴尬它要么漂浮在窗口之上挡内容要么缩在角落里看不清。Taskbar-Lyrics 的思路很反直觉与其让歌词抢你的屏幕不如把它塞进任务栏这条本就存在的边角料里。Windows 11 的任务栏高度有限、内容固定平时也就放个时间图标用它来显示一行歌词刚刚好。一句话总结这个项目能带来的价值在不打断任何工作的前提下让歌词随时可见、可读、可定制。当然它也有自己的倔强——目前只建议 Windows 11而且只保证原版任务栏能正常使用你要是装了 StartAllBack 之类的第三方美化工具出了问题作者可不背锅README 里原话就是这么写的。 第二幕半小时跑起来的完整流程这项目是JS C混合架构JavaScript 负责监听播放状态、拉歌词、画配置界面C 原生模块native.dll负责真正把窗口怼进任务栏并渲染文字。所以你要动手得先把这两块都编译出来。第一步检查你的入场券操作系统Windows 1121H2 及以上只适配原版任务栏音乐播放器网易云音乐新版支持 BetterNCM插件框架BetterNCM 3.0.0 或更高版本manifest.json 里betterncm_version写明了3.0.0编译工具Visual Studio 2022带 C 桌面开发组件 CMake 3.30 以上CMakeLists.txt 里写死了cmake_minimum_required(VERSION 3.30)第二步获取源码打开终端克隆仓库git clone https://gitcode.com/gh_mirrors/ta/Taskbar-Lyrics.git仓库结构很清爽plugin/cpp/放 C 原生模块plugin/js/放 JS 层plugin/public/放插件的预览图和清单文件。第三步编译 C 核心模块C 部分用 CMake 管理进入plugin/cpp/目录用 VS2022 的打开本地文件夹功能加载 CMakeLists.txt然后构建配置选Release架构选x86BetterNCM 要求 32 位原生插件点击构建静等它把 DirectX 依赖收拾好这一步在做什么CMakeLists.txt 里声明了项目名native最终产物就是native.dll语言标准 C20并且链接了五个关键库d3d11、d2d1、dwrite、dxgi、dcomp——这五兄弟分别负责 3D 渲染、2D 绘制、文字排版、图形交换和合成器是后面把窗口贴进任务栏的技术地基。add_library(native SHARED ...) target_link_libraries(native PRIVATE d3d11) target_link_libraries(native PRIVATE d2d1) target_link_libraries(native PRIVATE dwrite) target_link_libraries(native PRIVATE dxgi) target_link_libraries(native PRIVATE dcomp)第四步构建 JS 层JS 层用 Rollup 打包进入plugin/js/目录npm install npm run buildpackage.json里只有一个构建脚本rollup --config配合 terser 插件做压缩。打包产物会和你下载的 BetterNCM 插件结构对应上。第五步装进 BetterNCM 并启用把编译好的native.dll和构建出的 JS 文件放进 BetterNCM 的插件目录结构参照plugin/public/manifest.json它声明了插件名任务栏歌词、入口main.js和原生插件native.dll打开网易云音乐 → BetterNCM 插件管理找到任务栏歌词插件并启用重启网易云音乐让插件真正加载如果一切顺利任务栏上就会出现当前歌词一行主歌词 一行副歌词默认是翻译或下一句并且跟着播放进度实时滚动。⚙️ 第三幕把任务栏调教成你的专属歌词墙跑起来只是及格玩出花样才是乐趣。这个插件的配置能力比你想的丰富入口在网易云音乐 BetterNCM 的插件设置面板代码见plugin/js/src/main.js和plugin/js/src/config.js。三个配置分区各管一摊配置分区你能调什么大白话解释通用设置字体、左右边距、窗口对齐方式决定歌词住在任务栏哪个位置、长什么样主要歌词设置颜色、字号、粗细、斜体、下划线、删除线、文本对齐决定当前正在唱的那一行怎么显示次要歌词设置跟上面几乎一模一样的全套参数决定第二行翻译/下一句怎么显示字体下拉里内置了微软雅黑 UI、宋体、黑体、楷体、Arial、Consolas 等常用字体对齐方式有自动、左对齐、居中、右对齐四种文本对齐还支持两端对齐。值得注意的一个细节如果你在配置里选了个列表外的字体插件在onLoad时会自动帮你拉回微软雅黑防止渲染出豆腐块。不同场景的最佳配置参考使用场景字号主歌词颜色对齐方式字体样式写代码办公12px浅灰#CCCCCC左对齐正常粗细摸鱼娱乐14px纯白#FFFFFF居中粗体夜间环境13px柔白#F0F0F0右对齐正常粗细高对比度15px亮黄#FFFF00居中粗体下划线颜色支持带透明度配置里用的是 32 位 ARGB 值比如0xFFFFFFFF就是纯白不透明你可以把透明度调低让歌词半隐在任务栏里更不抢眼。三个实用小技巧双语歌词不用开两次只要歌曲自带翻译次要行会优先显示翻译而不是下一句判定逻辑在lyrics.js的mergeLyrics里时间差小于 0.75 秒才认为是对应翻译所以中英对照是开箱即用的。改配置不用重启配置项通过plugin.setConfig写回同时立刻调用原生接口刷新窗口布局属于热更新改完马上生效。副歌词可玩歌词剧场把次要歌词调成更小的字号 不同的颜色当前句和下一句之间就有了清晰的视觉层次看着像卡拉 OK 逐行推进。 第四幕它凭什么能把窗口长在任务栏上双端通信一条线程安全的流水线整个系统的通信链路很有意思。原生模块的入口在plugin/cpp/src/DllMain.cppBetterNCM 加载native.dll后调用BetterNCMPluginMain在里面注册了三个原生 APItaskbar_lyrics.config写配置、taskbar_lyrics.update刷新布局、taskbar_lyrics.lyrics推送歌词。JS 端通过betterncm_native.native_plugin.call(...)调用它们。api-addNativeAPI(new NativeAPIType[]{String, String}, 2, taskbar_lyrics.config, Receiver::config); api-addNativeAPI(nullptr, 0, taskbar_lyrics.update, Receiver::update); api-addNativeAPI(new NativeAPIType[]{String, String}, 2, taskbar_lyrics.lyrics, Receiver::lyrics);你注意到config.js里的玄机没有JS 层的配置对象其实是一个Proxy任何读操作都实时向原生层要值、任何写操作都立刻推送过去plugin.cpp里的Config.cppm则用一把std::mutex保护共享配置。所以配置改动即生效不是黑魔法而是一条设计好的双向通道。另外Plugin.cppm里用Global\Taskbar-Lyrics命名互斥量做了单例保护防止多实例打架。歌词同步一行二分查找lyrics.js里最亮眼的是一段二分查找。它没有用线性遍历去找当前该显示第几句而是对时间轴数组做二分let low 0, high this.currentLyric.length; while (low high) { const middle Math.floor((low high) / 2); if (this.currentLyric[middle].time currentTime) { low middle 1; } else { high middle; } } const currentIndex Math.max(0, low - 1);每收到一次播放进度事件O(log n) 就能锁定当前歌词索引索引没变就不触发回调避免无意义的渲染。配合loadGeneration计数器和AbortController快速切歌时旧请求会被中止不会出现上一首歌的歌词闪一下的错位。渲染不弹窗的 DirectX 窗口C 侧的window/Lyrics.cppm用 DirectWrite 创建两套IDWriteTextFormat主/次歌词各一套再按配置设置对齐、下划线、删除线最后在 Direct2D 渲染目标上按计算好的矩形绘制。歌词窗口本身是嵌入任务栏的无边框透明窗口所以看起来才像是任务栏原生的一部分。项目亮点与未来回看整个设计这个项目最大的亮点是克制不造浮动窗口、不抢焦点、只占用任务栏这条免费的空间其次是分层清晰——plugin/核心、taskbar/任务栏集成、window/渲染三个 C 模块各司其职JS 层只管逻辑与配置。项目目前主分支是 2.0 版本还在开发迭代中但已可编译使用。未来方向上多播放器支持、翻译增强、主题定制都是值得期待的想象空间。如果你手头有别的音乐平台需求从plugin/js/src/和plugin/cpp/src/的源码入手贡献一份力量也不失为一种参与开源的好方式。最后想说的其实是那句老话好的工具应该服务于人而不是打扰人。Taskbar-Lyrics 没有发明新的展示形态只是把歌词放到了它本来就该在的地方——你低头扫一眼任务栏的功夫副歌正好唱到那句你想听的话。这不就是恰到好处四个字最好的注脚吗【免费下载链接】Taskbar-LyricsBetterNCM插件在任务栏上嵌入歌词目前仅建议Windows 11项目地址: https://gitcode.com/gh_mirrors/ta/Taskbar-Lyrics创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考