免费快速完整指南：5 分钟把 Folia 歌词动画播放器装进手机（PWA 教程）

免费快速完整指南5 分钟把 Folia 歌词动画播放器装进手机PWA 教程【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 没有官方手机 App但 Web 版是标准 PWA渐进式 Web 应用装进手机就像 App 的网页。按本文操作约 5 分钟就能把这套歌词动画播放器装进手机主屏全程免下载。 装完之后你能得到什么先看效果再动手把结果摆在你面前。装完以后你的手机主屏上会多出一个 Folia 独立图标。点开的瞬间没有地址栏、没有标签页整块屏幕被歌词动画接管。网易云音乐、QQ 音乐、酷狗、Navidrome全部接得上播放时歌词随旋律整屏动。手机端能力边界一张表照表对号入座功能能否使用一句话解释在线搜索播放可以网易云、QQ 音乐、酷狗登录态留在手机浏览器里歌词动画主题可以响应式布局自动适配手机竖屏Navidrome 曲库可以NAS 上的歌通过 PWA 远程播导入本地音乐文件不行依赖桌面浏览器 File System Access API目录选择能力手机浏览器没有️ 第一步拿到一个手机能打开的地址记住一句话PWA 装得稳不稳全看地址是 HTTPS 还是 HTTP。三种路线按你的情况选一种路线适合谁耗时免费托管平台一键部署Vercel / Cloudflare没有服务器的新手约 5 分钟Docker 全栈部署有 NAS 或自建服务器几步配置克隆仓库自行部署想完全自定义看目标环境新手路线免费托管平台一键部署Vercel / Cloudflare项目提供一键部署入口指向 Vercel 或 Cloudflare平台自带域名和 HTTPS几分钟就能拿到访问地址不用管证书。QQ 音乐相关的接入配置照 docs/qq-music-deployment.md 逐项核对即可。自部署路线NAS / 服务器 Docker 全栈新建一个空目录放入 deploy/docker/compose.yaml 与环境变量模板编辑.env填入SYNC_TOKEN等配置执行docker compose up -d启动默认访问地址是http://NAS-IP:18080。完整步骤在 deploy/docker/README.md。自定义路线克隆仓库自己管仓库克隆地址https://gitcode.com/GitHub_Trending/fo/folia-major。环境变量怎么配按 docs/technical.md 的说明来目标平台支持 Node.js 即可。⚠️ 没有 HTTPSPWA 就没法可靠安装也没有离线运行。免费托管平台自带 HTTPS 最省心NAS 自部署请务必配好反向代理与可信证书否则手机上很可能根本找不到安装入口。 安卓 / iPhone各自 4 步上主屏幕安卓Chrome 四步添加 Folia 到主屏用 Chrome 打开 Folia 访问地址点右上角菜单⋮选「添加到主屏幕」或「安装应用」确认名称是 Folia点「添加」iPhoneSafari 四步添加 Folia 到主屏用 Safari 打开 Folia 访问地址点底部分享按钮⬆️上滑找到「添加到主屏幕」确认名称点「添加」装好后主屏出现独立图标。点一下应用以全屏独立窗口standalone 模式启动没有地址栏和标签页观感接近原生 App。为什么一个网页能做到接近原生拆开看是三处配置vite.config.ts 的 PWA manifest应用启动清单声明了standalone独立窗口、主题色#09090b、512×512 应用图标index.html 内置apple-mobile-web-app-capable等 iOS 全屏元标签Service Worker浏览器里负责拦截请求、缓存文件的小程序预缓存核心资源并采用autoUpdate自动更新策略——新版部署后下次打开就是最新版。 竖屏歌词动画主题速编与 AI 配色手机竖着拿歌词布局会自动响应式重排动画一条不少。进主题速编入口随手切风格主题配色还能交给 AI按歌曲情绪与歌词内容自动生成手机上同样可用。前提是部署时配置了 AI 密钥不配也不影响正常听歌。️ 进阶Navidrome 三步接入听「自己的歌」手机端没法直接导入音频文件Navidrome 补上这一环在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录在 Folia 的账户页接入 Navidrome 服务Folia 自动拉取曲库、封面和歌词歌词动画照常驱动音频留在 NAS手机只通过 PWA 远程播放不占手机存储。本地曲库的管理细节见 docs/local-library-management.md主要面向桌面端导入流程。 卡住了4 个高频问题一次说清现象怎么处理找不到「添加到主屏幕 / 安装应用」入口确认地址是 HTTPS安卓用 Chrome、iOS 用 Safari重新加载一次提示有时只在首次访问出现更新后手机上还是旧版Service Worker 是autoUpdate策略下次打开一般自动生效长时间没更新就清除站点数据或重新添加到主屏幕想导入本地音乐文件手机端不支持File System Access API 只有桌面端 Chromium 系浏览器有「自己的歌」走 Navidrome地铁弱网里打不开核心界面资源已预缓存启动没问题音乐流本身仍要网络⏱️ 收尾耗时一览环节动作用时部署 Folia Web 版免费平台或 Docker约 5 分钟手机打开地址浏览器输入访问地址约 10 秒主屏安装菜单 / 分享 → 添加到主屏幕约 1 分钟不到 10 分钟走完全程。主屏上那个 Folia 图标点开的就是全屏歌词动画、在线曲库和 Navidrome 歌单的合集——免下载、免安装、随开随听。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考