3 步把 Folia 全屏歌词动画播放器跑进手机Web 版 PWA 部署完整指南【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款全屏沉浸式歌词动画播放器支持网易云、QQ 音乐、酷狗在线播放也支持 Navidrome 私有曲库。Web 版原生支持 PWA 安装把网页当图标装进主屏幕点图标全屏打开。本文走Docker 部署 → 浏览器验证 → 装进手机主屏幕的主流程全程约 30 分钟。这篇文章适合谁读✅ 有 NAS 或家用服务器想让手机变成全屏歌词播放器的人。❌ 不想碰命令行的人桌面版即装即用仓库也提供 Vercel 一键部署路线。读完你得到手机上一个全屏 Folia 图标能在线搜索播放、看全屏歌词动画、接 Navidrome 私有曲库。全文围绕Docker 部署 手机安装没有服务器环境就先收藏。开工前的准备Docker Engine 24 与 Docker Compose v2这是 deploy/docker/ 部署栈要求的版本。deploy/docker/ 目录里的compose.yaml和.env.example两个文件把.env.example改名为.env与compose.yaml放进同一个空目录即可不用下载完整源码。想装 PWA 的话再备一个 HTTPS 域名和反向代理暂时没有 HTTPS 也能在线播放只是 PWA 安装与离线不可用。⚠️备好 1 台服务器 2 个文件其余边做边配。主线步骤填 Sync 令牌。执行openssl rand -hex 32把输出粘贴进.env的SYNC_TOKEN。此项必填且至少 8 位缺失时整栈拒绝启动。校验配置并拉镜像。执行docker compose config无报错后执行docker compose pull拉取镜像。启动全栈。执行docker compose up -d --wait跑完后docker compose ps应看到 gateway、backend、netease-api、kugou-api、qq-api、sync-server 共 6 个服务全部健康检查通过。浏览器验证地址。访问http://NAS-IP:18080首页打开、能搜索到歌并播放就算跑通。手机装进主屏幕。配好 HTTPS 反向代理与证书后安卓 Chrome 打开地址 → ⋮ 菜单 →添加到主屏幕iPhone Safari 走分享 →添加到主屏幕。点图标能弹出全屏窗口即成功。主流程就是填 1 个令牌 敲 4 条命令完整变量表见 deploy/docker/README.md。HTTPS 是 PWA 安装的前提只想先在手机上在线听1 到 4 步就够。跑起来之后Folia 以全屏窗口启动搜索、歌单、播放入口都收在一屏里。歌词进入全屏动画后每种主题的排版都按窗口尺寸响应式重排竖着拿手机会自动适配。点一下图标手机就是全屏歌词动画播放器布局与桌面端是同一套响应式代码。进阶把 Navidrome 用起来前提NAS 上已跑起 NavidromeDocker 即可并挂载了音乐目录。目标是手机直接播 NAS 上的歌文件留在 NAS不占手机空间。在.env填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项缺一不生效。执行docker compose up -d --force-recreate backend让 backend 生效。手机打开 Folia 页面会自动登录该 Navidrome曲库、封面、歌词照常驱动无需在手机上单独登录。两个注意项NAVIDROME_URL必须是手机能直接访问的地址Docker 内部主机名不行Folia 走 HTTPS 时它也要是 HTTPS否则浏览器拦混合内容。建议单独建一个 Navidrome 账号给 Folia 用——局域网里能打开 Folia 页面的人都能读到这组凭据。填 3 个变量 重建 1 个容器手机就是 NAS 曲库的遥控器。遇到问题先看这里现象docker compose up起不来或配置报错。原因SYNC_TOKEN缺失或少于 8 位。处理用openssl rand -hex 32重新生成随机串粘进.env再启动。现象手机上没有添加到主屏幕或装上后无法离线。原因部署地址是 HTTP不属于安全上下文PWA 安装与离线依赖 HTTPS。处理给 NAS 配反向代理加浏览器信任的证书要求见 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节确认用 Chrome / Safari。现象部署更新了手机里还是旧版本。原因Service Worker 是 autoUpdate 模式需要一次冷启动。处理重启一次 PWA长时间不更新就清除站点数据重新添加到主屏幕。现象改走 HTTPS 后登录态和设置丢了。原因HTTP 与 HTTPS 是不同 originIndexedDB 数据不自动迁移。处理重新登录登录态与设置存在浏览器本地属预期行为。九成卡点在HTTPS 没配和等一次冷启动别在本地文件导入上耗时间。现在你的手机就有一台全屏歌词动画播放器在线搜索、Navidrome 私有曲库、AI 主题配色全收进一个图标里。本地音乐文件导入留给桌面端手机听自己的歌走 Navidrome。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考