Folia 手机安装：三步让全屏歌词动画在手机上跑起来

Folia 手机安装三步让全屏歌词动画在手机上跑起来【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major地铁里掏出手机歌响起来歌词在全屏动画里逐字浮现——这就是 Folia 手机安装 后你要得到的效果。全程三步大约 5 分钟电脑上那台歌词播放器直接住进你的口袋。第一步把 Folia Web 版部署到 Vercel拿到手机能打开的 HTTPS 地址三条部署路径里Vercel 一键部署是门槛最低的一条不用服务器、不用配端口HTTPS 自带部署完直接得到一个手机浏览器能打开的域名。PWA 能否装进主屏幕就卡在这个 HTTPS 上。按 docs/technical.md 中的一键部署入口把 Folia 仓库导入 Vercel项目会自动构建构建完成后在项目设置的环境变量面板里补齐配置核心就这几项变量填什么什么时候需要VITE_NETEASE_API_BASE网易云音乐 API 实例地址必选没有它网易云音源不可用VITE_AI_PROVIDERgoogle或openai想用 AI 自动配色时GEMINI_API_KEY/OPENAI_API_KEY对应的 AI 密钥想用 AI 自动配色时VITE_QQ_API_BASE填/api/qq想用 QQ 音乐音源时QQ_SESSION_SECRET一串随机字符串不加VITE_前缀用/api/qq时加密登录态用QQ 音乐走的是仓库内置的 serverless 入口不需要单独部署 API 实例扫码登录细节见 docs/qq-music-deployment.md。酷狗则需要自己部署 KuGouMusicApi 并填写VITE_KUGOU_API_BASE。另外两条路径一句话带过Docker 全栈适合 NAS 用户按 deploy/docker/README.md 把compose.yaml与.env放进空目录SYNC_TOKEN填至少八位的随机串openssl rand -hex 32生成执行docker compose up -d默认访问http://NAS-IP:18080。默认是 HTTP要装 PWA 得让 NAS 反向代理终止 HTTPS 并挂浏览器信任的证书。克隆部署克隆仓库后需 Node.js 24 以上npm install创建.env.local填变量npm run build产出静态产物再丢到任意托管平台。第二步从 Chrome 或 Safari 把 Folia 添加到手机主屏幕地址就绪后两台手机各四下操作主屏幕就会多出一个 Folia 图标点它直接以独立全屏窗口启动没有地址栏和标签页。安卓Chrome用手机浏览器打开 Folia 地址点右上角菜单选「添加到主屏幕」或「安装应用」确认名称为 Folia点「添加」iPhoneSafari用 Safari 打开 Folia 地址点底部分享按钮上滑点「添加到主屏幕」点「添加」登录状态存在手机浏览器自己的 localStorage 里换设备就得重新扫一次码——这是 PWA 与原生 App 的小差异换来的是零安装成本。第三步点开图标播放竖屏全屏歌词动画自动重排点图标后进入的就是手机上不缩水的 Folia歌词动画与桌面端是同一套渲染逻辑每种风格都有独立的排版逻辑和一组可调参数窗口尺寸一变画面就实时重排。竖着拿手机时歌词位置自动调整动画一拍不落。「流光」风格把光影铺在黑底之上OLED 屏上纯黑区域直接熄屏通勤黑灯环境下沉浸感尤其足配色也可以交给 AI它依据歌曲的情绪与歌词内容自行给主题生成一套色板。这条路径在手机上一样走通前提是部署时填了VITE_AI_PROVIDER与对应的密钥变量GEMINI_API_KEY/OPENAI_API_KEY那一组没填就只能用内置主题。Folia 手机端能力边界在线音源全可用本地导入用不了手机上能做的在线搜索与播放——网易云、QQ 音乐、酷狗三个音源都可用登录状态存在手机浏览器里全屏歌词动画Navidrome 自建曲库Docker 部署预置凭据时甚至免登录。手机上做不了的只有一件导入手机本地的音乐文件。目录导入基于 File System Access API这是桌面 Chromium 系浏览器才有的能力手机浏览器没有这个入口仓库里src/services/localLibraryAvailability.ts的可用性检查也明确把它限定在安全上下文加桌面浏览器。一句话结论手机上的 Folia 定位是「在线听歌 歌词动画」想听自己的歌交给 Navidrome。接入 Navidrome 自建曲库在手机上听自己的歌补上「听自己的歌」这块缺口只要四步在 NAS 上用 Docker 起 Navidrome指向你的音乐目录手机里打开 Folia 的账户页填入 Navidrome 地址与账号Folia 自动拉取曲库、封面与歌词歌词动画照常驱动如果你走的是 Docker 部署路线第 2 步可以省掉在.env里同时填上NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项backend 会通过/api/navidrome-preset下发凭据任何新打开的浏览器自动登录并启用 Navidrome——手机、电视、电脑不用各登一次。注意NAVIDROME_URL必须是各设备都能直接连上的地址Folia 走 HTTPS 时它也要是 HTTPS否则浏览器会拦截混合内容。⚠️ 局域网里能打开 Folia 页面的人都能读到这组预置凭据建议在 Navidrome 里单独建一个账号给 Folia 用。Folia PWA 安装踩坑速查四个高频症状的对应解法手机上看不到安装入口→ 原因站点没跑在 HTTPS 下或浏览器不对安卓用 Chrome、iPhone 用 Safari。地址确认是 HTTPS 后刷新一次页面——安装提示往往只在首次访问时给出。重新部署了新版手机还是旧界面→ 原因Service Worker 按autoUpdate策略注册新版本要等下次打开才接管。长期不更新时清除一次站点数据或移除图标后重新添加到主屏幕。想导入本地音乐找不到入口→ 原因File System Access API 只在桌面 Chromium 系浏览器提供手机浏览器没有替代。解法就是 Navidrome歌放 NAS 上流式提供给手机封面与歌词自动补齐。地铁里只剩一格信号应用能开但歌放不出来→ 原因界面资源已被 Service Worker 缓存应用本身很快打开但音乐流需要网络。想完全离线听歌做不到。拿到地址、图标进主屏幕、点开听歌——Folia 就是口袋里那台全屏歌词动画播放器。想跨设备同步主题进阶入口在 deploy/docker/README.md 的 Sync Server 一节。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考