Folia 歌词动画播放器手机 PWA 安装完整指南8 分钟从部署到主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款接网易云、QQ、酷狗在线曲库和 Navidrome 私有曲库的歌词动画播放器。它没有官方手机 App但 Web 版本身就是 PWA部署上线后直接装进手机主屏幕点开图标就是全屏歌词页面。本文按先上线、再安装、后体验的顺序带你在 8 分钟内完成部署、主屏幕安装和首次使用。装之前先上线0~5 分钟部署 Folia Web 版PWA 本质是浏览器可以装起来的网页所以第一步是先把 Folia 放到手机能访问的线上地址。三条路线对比如下路线适合人群前置条件耗时一键托管Vercel / Cloudflare新手、无服务器用户一个平台账号HTTPS 免费自带5~10 分钟Docker 全栈部署NAS / 自建服务器用户Docker 24需配反向代理与可信证书15~30 分钟克隆仓库自行部署想完全自定义的人Node.js 24会配环境变量30 分钟起推荐一键托管在托管平台部署完成后几分钟就能拿到一个带域名的 HTTPS 地址环境变量说明见 docs/technical.mdQQ 音乐相关配置见 docs/qq-music-deployment.md。另两条路线的做法自部署先执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major然后按文档填好VITE_NETEASE_API_BASE等变量再构建。Docker 路线下载 deploy/docker/compose.yaml填好SYNC_TOKEN后执行docker compose up -d默认访问http://NAS-IP:18080完整步骤见 deploy/docker/README.md。⚠️ 记住一条硬前提PWA 的可靠安装和离线运行都依赖 HTTPS 安全上下文。托管平台自带证书最省心NAS 自部署必须配反向代理和可信证书否则手机上会找不到安装入口装上之后离线能力也会直接降级。 Folia PWA 手机主屏幕安装步骤安卓与 iPhone装之前先说清楚你装到的形态独立图标、standalone 全屏窗口、核心资源离线缓存。这些能力 Folia 已经配好——vite.config.ts里的 manifest 设了display: standaloneindex.html带了 iOS 全屏所需的全部元标签所以安卓和 iPhone 拿到的是同一套完整体验不需要额外设置。安卓Chrome用 Chrome 打开你的 Folia 地址点右上角 ⋮ 菜单选添加到主屏幕确认名称显示为 Folia点添加iPhoneSafari用 Safari 打开 Folia 地址点底部 ⬆️ 分享按钮上滑找到添加到主屏幕确认图标与名称点添加装完后主屏幕出现 Folia 图标点开即全屏独立窗口运行状态栏与页面融为一体观感上与普通 App 没有区别。下面是连接网易云曲库后的首页安装后第一天手机端能力边界与歌词动画主题体验先划清边界能做什么、不能做什么一句话说清能力项手机端表现在线搜索与播放网易云 / QQ / 酷狗✅ 完全可用登录态存在手机浏览器里全屏歌词动画主题✅ 完全可用竖屏自动重排Navidrome 私有曲库✅ 完全可用NAS 曲库首选导入手机里的本地音乐文件❌ 依赖桌面端 File System Access API手机浏览器没有这个能力不行就是不行本地曲库管理的完整细节见 docs/local-library-management.md。体验部分Folia 的招牌是全屏歌词动画。每种主题都有独立排版并且随窗口尺寸响应式重排——竖着拿手机时布局会自动调整动画效果不打折扣。比如pendolo是机械齿轮与星空轨道主歌词横排在屏幕一侧副歌高亮逐字亮起cappella群唱风格把歌词排成左右交替的对话气泡竖屏下尤其好读lumi流光风格走深色背景加流动光效在 OLED 屏手机上对比度表现尤其突出主题可随时在主题速编入口切换如果部署时配置了 AI 密钥配色还能由 AI 按歌曲情绪自动生成。进阶玩法接入 Navidrome在手机上听自己的歌想听自己存的音乐走 Navidrome文件留在 NAS 上手机通过 Folia PWA 远程访问省空间也省流量。在 NAS 上用 Docker 部署 Navidrome挂载音乐目录在 Folia 的.env里填入NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项新打开的浏览器会自动登录并启用 Navidrome曲库、封面、歌词照常驱动⚠️NAVIDROME_URL必须写各设备都能访问到的地址不能填 Docker 内部主机名Folia 走 HTTPS 时它也要是 HTTPS否则浏览器会以混合内容为由拦截请求。预置账号的完整说明在 deploy/docker/README.md 的Navidrome 预置账号一节。 排坑手机安装 Folia 常遇到的 4 个问题Q1手机上找不到添加到主屏幕选项先检查地址栏是否为 HTTPSHTTP 下无法可靠安装其次确认安卓用的是 Chrome、iOS 用的是 Safari其他浏览器不一定显示入口。再重新加载一次页面安装提示有时只在首次访问时出现。Q2线上部署更新了手机里还是旧版本Service Worker 采用autoUpdate策略版本更新在下次冷启动时自动生效等一次彻底关闭再打开即可。若长时间未更新清除一次站点数据或卸载图标后重新添加到主屏幕。Q3手机上能导入本地音乐吗不能。目录导入依赖 File System Access API仅桌面 Chromium 系浏览器支持手机浏览器没有这个接口。想听自己的歌走上一节的 Navidrome 方案。Q4自部署后封面不缓存、选不了音频输出设备原因是 HTTP 不是安全上下文Service Worker、OPFS 缓存、音频设备枚举都会降级。给 NAS 配上反向代理和可信证书重启 PWA 后这些能力全部恢复。部署地址是起点主屏幕图标是终点。8 分钟之后你手里多了一台随身歌词动画播放器在线搜索、Navidrome 曲库、AI 主题配色全部装进那个全屏窗口里。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考