完整指南：4 步部署 Folia 全屏歌词播放器并装进手机主屏

完整指南4 步部署 Folia 全屏歌词播放器并装进手机主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器 A multi-platform music player for local files, Navidrome, and online streaming services, featuring stunning animated lyrics.项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款全屏歌词动画音乐播放器支持网易云、QQ 音乐、酷狗在线播放与 Navidrome 远端曲库。本文分 4 步走通部署 Web 版、验证搜索播放、把 PWA 装进主屏、用 Navidrome 接自己的曲库全程 15-30 分钟。做完之后点一下主屏图标歌词动画就铺满整块屏幕。部署之后歌词铺满整块竖屏效果一句话装进手机后歌词居中撑满竖屏底部只留一条迷你播放条每个主题的排版都会自动适配竖屏。总耗时 15-30 分钟取决于走哪条路线。适合想在手机上听在线音乐或自己 Navidrome 曲库的人如果你的诉求是把手机里的本地音乐文件夹导进播放器这条路走不通Web 端没有这个入口。 动手前自查三个问题先确认多数人的问题都出在准备阶段下面三项核一遍后面基本不会再卡地址栏有没有锁形标志没有就是 HTTPS 没配好PWA 安装入口根本不会出现。路线 A 天然带 HTTPS路线 B 需要在 NAS 反向代理上挂可信证书。浏览器是 Chrome安卓还是 SafariiPhone其他浏览器要么没有「添加到主屏幕」入口要么行为不一致。页面能打开、搜索有结果吗搜索框能出结果说明服务是活的出不了就先回到部署小节排查。能力边界也划清楚Web / PWA 端能用Web 端没有在线搜索、播放、全屏歌词动画本地音乐文件夹导入仅桌面 Chromium 浏览器支持Navidrome 远端曲库桌面专属的模组系统等能力路线 AVercel 一键部署免服务器打开 Folia 仓库首页点顶部的 Deploy with Vercel 按钮创建项目一步到位Cloudflare 同理想省事就选 Vercel门槛最低。构建结束后直接拿到 https 地址域名和证书都不用管。手机打开页面点顶部「账户」登录网易云、QQ 音乐或酷狗任意一个。搜一首歌点播放进入全屏歌词。判断做对没有页面打开、搜索有结果、声音出来、歌词在动最小链路就算跑通。登录后账号状态存在浏览器本地同一地址下很长一段时间不用反复登录。注意在 Vercel 登录 QQ 音乐要填环境变量VITE_QQ_API_BASE/api/qq并另配服务端密钥QQ_SESSION_SECRET不带VITE_前缀细节见 docs/qq-music-deployment.md。拿不准就先跑通路线 A后面想切路线 B 随时能切地址换掉之后重新登录、补一遍配置即可。路线 BNAS / 自建 Docker 全栈部署在 NAS 上建一个空目录放入compose.yaml和.env两个文件.env由同目录.env.example生成。.env至少填两项FOLIA_IMAGE_NAMESPACE默认papersman和SYNC_TOKEN可用openssl rand -hex 32生成AI 密钥可留空不影响播放。启动docker compose pull docker compose up -d --wait验证curl http://NAS-IP:18080/healthz返回正常说明网关起来了再照路线 A 的第 3、4 步登录、搜索、播放。局域网 IP 加 HTTP 只能搜索和播放PWA 安装不可靠要装进手机让 NAS 反向代理终止一张可信的 HTTPS 证书。环境变量、QQ 登录态、反向代理细节都在 deploy/docker/README.md。不想养服务器时随时可以再整体迁回托管路线配置就是环境变量一组迁移不折腾。 把 Folia 添加到手机主屏幕安卓Chrome 添加到主屏幕用 Chrome 打开 Folia 地址。点右上角菜单⋮。选「安装应用」或「添加到主屏幕」。确认名称是 Folia点添加。iPhoneSafari 添加到主屏幕用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」。确认名称点添加。判断装对了没有点图标直接进入全屏模式画面里看不到地址栏和标签页就算装成了。接 Navidrome把自己的曲库流式送上手机原理很简单音频文件一直留在 NAS 上Navidrome 扫描后提供流式播放Folia 页面只拉列表、封面和歌词。在 NAS 上用 Docker 部署 Navidrome把音乐目录挂进容器。打开 Folia 设置页找到 Navidrome 连接一栏填服务器地址、用户名、密码点「测试连接」。测试通过后保存回首页 Navidrome 页签直接点歌播放。接对没有看一点Navidrome 地址必须是每台设备都够得到的别写 Docker 内部主机名Folia 页面走 HTTPS 时它也得是 HTTPS否则浏览器直接拦截混合内容。排障速查表常见症状与第一反应症状第一反应菜单里没有「添加到主屏幕」多半是走了 HTTP 地址或浏览器不是 Chrome / Safari换 HTTPS 重载页面更新之后打开还是旧界面Service Worker 缓存卡住了清掉站点数据或重新添加图标找不到本地导入入口这是功能边界不是 bugWeb 端走 NavidromeNavidrome 测试连接失败地址写了 Docker 内部主机名或页面 HTTPS 而地址是 HTTP换成全局可达地址换 HTTPS 后登录态丢失HTTP 与 HTTPS 是两个 origin数据不迁移重新登录并补配置接下来往哪走分阶段路线图先跑通最小链路走路线 A搜一首歌、播放、进入全屏歌词动画完整走一遍。稳了再接 Navidrome把自己硬盘里的歌搬上手机。锦上添花填 AI 密钥让每首歌的主题配色自动生成部署 sync-server 可以跨设备同步外观细节见 docs/technical.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器 A multi-platform music player for local files, Navidrome, and online streaming services, featuring stunning animated lyrics.项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考