浏览器里的全屏歌词播放器：Folia
在浏览器里就能用的全屏歌词播放器 Folia，漂亮又好用。
普通播放器的歌词，基本就是一行行往上滚，看久了很单调。Folia 把歌词变成了全屏动画：字会一个个跳出来、旋转、发光，背景颜色跟着封面变，放在副屏或者电视上，就像在放一段歌词 MV。
Folia 本来是一个桌面客户端，但它也有 Web 版，可以免费部署到 Vercel 上，之后电脑、手机、平板打开浏览器就能用。这篇就手把手讲一遍 Web 版的部署，再带你看看它都能做什么。
项目介绍
Folia 是一个开源的沉浸式音乐播放器，主打全屏歌词动画。前端用 React + Vite 开发，桌面版基于 Electron，支持 Windows、Mac 和 Linux。Web 版和桌面版用的是同一套界面，只是部分平台功能（比如 Spotify、YouTube Music、遥控窗口）只有桌面版有。
项目特征
- 十几种歌词动画：流光、心象、云阶、浮名、倾诉、回环、莫奈、时计、群唱、镜台、商籁……每种风格完全不同，还能调动画强度
- 背景跟着封面变：自动从专辑封面取色，生成流动的背景，每首歌都有自己的配色
- AI 主题：配置好 Gemini 或 OpenAI 兼容接口后，可以按歌曲生成一套主题配色
- 多个音乐来源：网易云、酷狗、QQ 音乐，也能接自己 NAS 上的 Navidrome 和本地音乐文件夹
- 细节很多：歌词时间轴微调、在线匹配歌词、音频效果器、智能过渡、快捷键和命令面板
部署前准备
Web 版要正常用，需要准备两样东西：
- 一个部署 Folia 前端的地方，这里用 Vercel
- 一个网易云 API 地址，Folia 用它来搜歌、拿歌词
Folia 的 Web 版不自带音乐接口，必须先有
VITE_NETEASE_API_BASE。部署完能打开页面但搜不到歌，九成是这个地址没填对。
另外还需要一个 GitHub 账号和一个 Vercel 账号。想用 AI 主题的话，再准备一个 Gemini Key，或者 OpenAI / DeepSeek 这类兼容接口的 Key。
第一步：部署网易云 API
Folia 现在依赖的是 NeteaseCloudMusicApiEnhanced 这个开源项目（仓库名 api-enhanced）。官方指南给了两种方式。
方式 A：部署到 Vercel
- 在 GitHub 上把 api-enhanced 仓库 Fork 到自己账号下
- 打开 Vercel，点
New Project，选刚 Fork 的仓库导入 Framework Preset选Other- 在环境变量里加一条
ENABLE_GENERAL_UNBLOCK=false - 点 Deploy，部署完会得到一个 vercel.app 结尾的地址，记下来
注意：Vercel 的服务器在国外，访问网易云接口可能比较慢，偶尔会失败。官方建议给 API 绑一个国内能正常访问的自定义域名，或者干脆部署到自己的国内服务器上。
方式 B：跑在自己的 NAS 或服务器上
家里有 NAS 或者有一台云服务器的话，更推荐这种方式，速度更稳。需要 Node.js 环境：
我这次就是用这种方式在本机跑的。启动后浏览器打开 3000 端口，能看到下面这个页面就说明 API 跑起来了：
如果 Folia 部署在 Vercel 上，而 API 在家里，API 地址必须是公网能访问的 HTTPS 地址，否则手机在外面打开会用不了。
第二步：一键部署 Folia 到 Vercel
- 先登录 GitHub 和 Vercel，第一次用 Vercel 按提示授权 GitHub
- 打开 Folia 官方文档的「部署 Web 版」页面，点里面的 Deploy with Vercel 按钮
- Vercel 会打开新建项目页面，仓库来源是 chthollyphile/folia-major
Project Name填一个自己喜欢的名字，比如 folia-player，它会决定默认访问地址
第三步：填写环境变量
这一步最关键。在 Vercel 新建项目页面找到 Environment Variables，一项一项填进去：
必填的有两个：VITE_NETEASE_API_BASE 填上一步拿到的网易云 API 地址，VITE_AI_PROVIDER 填 google 或 openai。酷狗和 QQ 音乐的地址不用就留空。
用 Gemini 的话这样填：
用 OpenAI、DeepSeek 等兼容接口的话这样填：
注意：QQ 音乐的 API 需要常驻进程，不能放在 Vercel 上，要用的话得另外找一台能跑 Docker 或 Node 的机器。不用 QQ 音乐的话 VITE_QQ_API_BASE 留空就行。
第四步：部署并检查
填好后点 Deploy，Vercel 会依次拉取仓库、安装依赖、构建项目、发布上线，看到 Deployment completed 就成功了。
第一次打开建议检查四件事：
- 首页能不能正常打开
- 随便搜一首歌，确认网易云 API 能用
- 点开一首歌，确认能进播放页
- 试一下 AI 主题，确认 AI 相关变量填对了
以后改了环境变量，要到 Deployments 里对最新一次部署点
Redeploy，新配置才会生效。想换成自己的域名，在 Settings → Domains 里添加就行。
上手使用
搜歌和播放
点左下角的放大镜，搜索框下面可以切换网易云、本地和 Navidrome 三个来源。不登录也能搜，点一首歌就直接进全屏播放页。
切换歌词样式
播放页右下角有个控制按钮，点开后切到「控制」页签，「歌词样式」左右箭头就能换动画，旁边还能调动画强度、背景类型和颜色来源。
AI 主题
同一个面板下方可以在「默认」「AI主题」「自定义」之间切换，点「生成AI主题」就会按当前歌曲生成配色，这一步依赖前面填的 AI 环境变量。
接上 NAS 里的 Navidrome
如果你 NAS 上已经跑着 Navidrome，在「设置 → 连接与集成」里打开「连接 Navidrome」，填服务器地址、用户名和密码，点「测试连接」，自己曲库里的歌也能用上这些歌词动画。
其他设置
外观里可以切明暗模式、主题自动切换；播放页设置里能选点播放后进入哪个视图、要不要自动隐藏控件。
实测说明
这次我是在自己的机器上按 Vercel 的构建方式跑的：克隆仓库、npm ci、npm run build，再用本地服务打开构建结果，网易云 API 也是本机启动的。文中的播放页和设置截图都来自这次实测；Vercel 相关的步骤截图来自官方指南和 Vercel 的新建项目页，我没有真的部署到 Vercel 上。
有几项我没有测到：AI 主题我没有配置 Key，没法验证生成效果；Navidrome 没有接真实服务器；也没有登录任何音乐账号。另外不登录的情况下，部分歌曲可能只能播放片段，以平台规则为准。
总结
Folia 是我最近见过颜值最高的开源播放器，十几种歌词动画每一种都很有设计感。Web 版部署到 Vercel 不需要服务器，难点只在网易云 API：Vercel 上的 API 国内访问可能慢，家里有 NAS 的话，把 API 跑在 NAS 上会更稳。追求完整功能的话，直接装桌面版也是很好的选择。
如果这篇对你有帮助
