如何把每首歌都变成文字 MV:Folia 全屏歌词播放器完整指南
【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major
想在 NAS 里听歌,却找不到一个歌词好看的播放器?本地歌曲没歌词,.lrc文件又乱得没法手动对齐?Folia 是一款专注于全屏歌词动画效果的本地音乐 / Navidrome / 多平台在线音乐播放器。桌面版即装即用,不用配任何东西,两分钟就能看到第一个全屏歌词动画。
30 秒速览
| 项 | 说明 |
|---|---|
| 支持平台 | Windows / macOS / Linux 桌面端、Web 版、PWA |
| 音源 | 本地曲库、Navidrome、网易云、QQ 音乐、酷狗等 |
| 核心产出 | 全屏沉浸式歌词,多款动画主题 |
| 歌词来源 | 在线智能匹配,本地.lrc/.vtt/.ttml等文件 |
| AI 能力 | 按歌曲情绪自动生成背景主题 |
| 技术栈 | React 19 + Vite 6 + Electron |
| 适用人群 | 听歌的人、NAS 用户、歌词动画爱好者 |
主界面:接入音源后,首页以轮播卡片展示歌曲与歌单,点开即进全屏歌词视图
用户工作流:从接音源到全屏歌词
接入:在线音源、本地曲库、NAS 三选一
先接上音源,不管你走哪条路,放歌的同时歌词就已经在匹配了:
- 在线音源:网易云、QQ 音乐、酷狗在桌面版开箱即用,QQ 支持扫码登录;Web 版需要自己填 API 地址,
VITE_NETEASE_API_BASE是必配项,QQ 把VITE_QQ_API_BASE填成/api/qq即可走内置的 serverless 入口,不用再单独部署 API 实例(细节见 docs/technical.md)。 - 本地曲库:导入文件夹后只在本机保存索引,音频文件内容不会上传。本地歌曲会按 网易云 → QQ → 酷狗 的顺序自动匹配在线歌词与封面,匹配不准时手动选候选,或恢复导入时的原始信息。
- Navidrome:填上自建服务器地址,NAS 里的歌直接在客户端里搜索播放。
Navidrome 页签下专辑卡按服务器列出,右上角可切换排序并刷新
播放:全屏歌词动画主题随便切
接上后随便点开一首歌,就是全屏歌词视图。Folia 内置多款动画主题——浮名(Fume)、流光(Lumi)、时计(Pendolo)等,各有不同的排版氛围和可调参数,且自动适配窗口大小,大屏桌面和小窗都能用。
- 换主题:在设置里选歌词动画主题并调参,换一首歌氛围就换一套,不用改歌曲本身。
- 歌词兼容:自动识别本地歌曲同目录的
.lrc、.vtt、.ttml、.qrc、.yrc、.krc文件,也支持文件内嵌 LRC 和 LDDC 风格的增强逐字歌词,逐字随进度高亮。 - 为什么要主题库:固定一套排版撑不起所有曲风,"主题库 + 可调参数"让你按歌换效果。
浮名主题:当前行放大高亮,其余歌词淡入背景,形成文字 PV 般的节奏感
装扮:让 AI 给每首歌配背景
Folia 的招牌功能之一:基于歌曲情绪与歌词内容生成沉浸式背景和视觉参数,每首歌一套专属配色,不用自己找壁纸。
- 主题来源:设置里可选"AI 推断"或"封面取色"。没配 API Key 时 AI 推断会给出提示和"去配置"入口,封面取色则不依赖任何服务,先用着。
- 自动切换:打开"主题自动切换"后,播放有缓存主题的歌直接套用;再打开下一层开关,没缓存的歌也会自动生成。
- API 供应商:桌面版可直接选 Gemini、DeepSeek、Kimi、GLM、Qwen 等,每家供应商一个独立适配器,见 shared/ai/。
AI 主题效果:背景按歌曲意象渲染,歌词原文与翻译叠在画面上
再进阶:节拍分析与智能过渡
想让歌词跟着音乐"动",Folia 把分析做在你本机:
- 智能过渡:automix 在切歌时自动完成淡出淡入衔接,不用手调交叉时长,实现在 src/services/automix/。
- 智能动感模式:用 Beat This! 模型检测拍点、htdemucs 分离鼓轨,全部跑在本机 WebGPU(浏览器里的 GPU 编程接口)上,时计主题的鼓面就跟着鼓点敲击。
- 模型随包:模型文件由
shared/modelManifest.json按 sha256 锁定并打进安装包,装完就能用。
时计主题:齿轮盘面随节奏转动,日文歌词与中译并排呈现
技术底座:它是怎么搭起来的
技术栈一句话:React 19 + Vite 6 + TypeScript + Tailwind CSS 4 渲染前端,Electron 打包桌面版,纯 Node.js 服务跑 Web 版。模块职责如下:
| 模块 | 一句话职责 |
|---|---|
src/services/onlineMusic/ | 在线音源的搜索、播放与登录编排 |
src/services/analysis/ | 本地节拍分析与鼓轨分离,跑在 WebGPU |
src/components/visualizer/ | 歌词动画主题的注册、预览与调参面板 |
src/services/automix/ | 智能过渡,切歌淡入淡出编排 |
electron/ | 桌面主进程:后端服务、高音质、壁纸模式 |
deploy/docker/ | Docker Compose 全栈部署(Web 版自托管) |
整条链路一句话串完:接音源 → 搜索播放 → 歌词匹配 → 主题生成 → 全屏渲染,智能过渡并行跑在切歌时。设置默认存在本机,想跨设备同步外观与 AI 主题库,自行托管官方的sync-server,在「设置 → 连接与集成」填入服务端地址和SYNC_TOKEN即可。
边界与坑:先认清它做什么、不做什么
- 适合:本地曲库、NAS 曲库的颜值党,想要全屏歌词动画的人;不适合:下载 MP3 或离线音源——它是播放器,不是下载工具。
- Web 版要自己部署后端:
VITE_NETEASE_API_BASE必配,QQ 音乐填VITE_QQ_API_BASE才可用(可用内置/api/qq),酷狗需要自部署 KuGouMusicApi,都没有公共实例可填。 - 登录态:serverless 形态下 QQ 播放前必须先登录;桌面版有扫码登录兜底,登录入口就在音源页。
- AI 主题依赖 API Key:不配 Key 只能走封面取色,想要 AI 背景先去设置里配好供应商。
- 节拍效果依赖 GPU:智能动感模式需要 WebGPU,设备不支持时鼓轨分离不跑,时计等主题的鼓点联动会缺失,设置页可探测本机有没有可用 GPU。
- 本地开发门槛:需要 Node.js 24;开发环境首次跑节拍模型前先执行
npm run models:fetch拉取模型。
速查卡
| 项 | 内容 |
|---|---|
| 克隆源码 | git clone https://gitcode.com/GitHub_Trending/fo/folia-major |
| 安装依赖 | npm install(要求 Node.js >= 24) |
| 启动前端 | npm run dev |
| 桌面开发模式 | npm run dev:electron |
| 打包桌面端 | npm run build:electron |
| 拉取节拍模型 | npm run models:fetch |
| 环境变量 | .env.local,VITE_NETEASE_API_BASE必填 |
| 歌词本机接口 | GET http://127.0.0.1:32109/v1/lyric |
| 技术细节 | docs/technical.md、deploy/docker/README.md |
| 下一步 | 去 Release 下安装包,或克隆源码跑起来 |
把安装包装上,今晚就给你最爱的歌配上一套它从来没有过的全屏歌词动画 🎵
【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考