Folia 手机端使用指南如何部署 Web 版并把全屏歌词动画播放器装进手机主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款主打全屏歌词动画的音乐播放器支持网易云、QQ 音乐、酷狗与 Navidrome 曲库。这篇指南带你走完「部署 Folia Web 版 → PWA 安装到手机主屏 → 接入在线或自建曲库」三步全程不用写代码。装进手机后能干什么三个真实使用场景车里导航和播放都在手机上完成全屏歌词动画开着就是一座随身屏幕通勤时间有了去处。睡前手机搁在枕头前竖屏下歌词动画完整可用各主题排版都会自适应窄屏不裁剪也不拥挤。客厅、出差接上自建曲库后歌文件留在 NAS 里手机只负责拉曲库、封面和歌词边听边看词。装好之后的最终画面点主屏图标Folia 以独立全屏窗口启动没有地址栏和标签页观感接近原生应用登录态、主题偏好都保存在手机浏览器里一次配置长期有效。时间预期走一键托管 在线曲库的主路径全程约 30 分钟其中动手操作不超过 5 分钟其余都在等部署跑完。动手前花 5 分钟部署前置自查清单选定部署路线一键云托管、NAS Docker、完全自建三选一各自适合谁见下一节手机浏览器对号入座安卓用 ChromeiPhone 用 Safari其他浏览器可能没有安装入口访问地址是 HTTPSPWA 安装依赖浏览器安全上下文纯 HTTP 会缺失安装入口免费托管平台自带 HTTPSNAS 自托管则需配一层反向代理把外部请求转发到本地服务的中间层加可信证书曲库账号就绪网易云、QQ 音乐、酷狗登录态随手可扫走 Navidrome 路线则需一台放着音乐的 NAS预期对齐在线搜索播放、歌词动画、Navidrome 曲库都能用导入手机本地的音频文件不可用三条部署路线把 Folia Web 版放到手机够得到的地址零基础路线一键云托管适合没有服务器、第一次折腾的人。打开项目 README.md点内置的 Vercel 或 Cloudflare 一键部署按钮。授权后等几分钟得到一个带 HTTPS 的地址域名和证书都不用管。要用 QQ 音乐的话在环境变量里把VITE_QQ_API_BASE填成/api/qq再加一个服务端密钥完整步骤见 QQ 音乐部署指南。环境变量一行说明VITE_QQ_API_BASE指向平台内置的 serverless按需运行、无需常驻服务器API 入口服务端密钥不加VITE_前缀。验证用手机浏览器打开新地址Folia 启动画面出现、地址栏有锁标志这一步就算成功。NAS 路线Docker 容器栈部署适合已有 NAS 或服务器、习惯把音乐存网盘的人。从仓库取 deploy/docker/compose.yaml 和.env.example环境变量模板放进同一目录并改名为.env。编辑.env把SYNC_TOKEN填成一个至少 8 位的随机字符串同步客户端的访问令牌。执行docker compose up -d在后台启动整套服务。Web 入口默认是http://NAS-IP:18080把NAS-IP换成你的机器地址端口、环境变量、反向代理与证书的细节都在 deploy/docker/README.md 里。验证先在电脑上打开地址页面正常且/healthz有响应再确认手机也能打开同一地址打不开就说明网络不通先解决网络再谈安装。掌控路线克隆仓库自行部署适合想把环境变量、构建、HTTPS 全握在自己手里的人。执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major克隆下来后按 docs/technical.md 自行配置部署即可。验证与上面相同用手机浏览器打开最终地址确认页面正常。把 Folia 装进手机主屏安卓与 iPhone 安装步骤安卓手机 Chrome 安装步骤用 Chrome 打开 Folia 的 HTTPS 地址。点右上角菜单⋮。选「安装应用」或「添加到主屏幕」。确认名称为 Folia点添加。这一步做完你可以检查点主屏图标Folia 以独立全屏启动、没有地址栏就是装对了如果还是开成浏览器页面说明地址是 HTTP 或浏览器不对换回指定条件重试。iPhone Safari 安装步骤用 Safari 打开 Folia 的 HTTPS 地址。点屏幕底部的分享按钮。上滑找到「添加到主屏幕」点击。确认名称点添加。验证方式相同启动即全屏独立模式看不到任何浏览器痕迹。装好后在账户页登录网易云、QQ 音乐或酷狗。登录态存在手机浏览器里登录一次之后很长一段时间不用重复登。接入自己的歌三步接 Navidrome 自建曲库原理一句话歌放在 NAS 上Navidrome开源自建音乐流媒体服务扫描后以流媒体曲库对外服务手机 PWA 只负责拉曲库、封面和歌词文件不进手机省空间也省流量。在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录。在 Folia 的账户页接入 Navidrome地址必须是每台设备都够得到的地址不能写 Docker 内部主机名Folia 页面走 HTTPS 时它也得是 HTTPS否则浏览器会拦截混合内容。曲库与封面同步完成后直接播放缺失的歌词由智能匹配自动补齐歌词动画照常驱动。Docker 全栈用户可以把NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项填进.env新打开的浏览器会被自动下发预置账号不用每台设备各登一次。桌面端本地曲库的管理方式可参考 docs/local-library-management.md。常见问题出问题时集中排一次菜单里找不到「添加到主屏幕」多半是 HTTP 地址或浏览器不是 Chrome/Safari。换成 HTTPS 地址和指定浏览器再重载一次页面。线上已更新手机打开还是旧界面Service Worker浏览器本地缓存程序的更新时机通常滞后一次打开。清除该站点的浏览器数据或删掉图标重新添加。手机端为什么没有本地导入入口本地目录导入依赖 File System Access API让网页直接读取本地文件夹的浏览器接口只有桌面端 Chromium 系浏览器支持手机端本来就没有这个入口。想听「自己的歌」走 Navidrome 路线。Navidrome 连上了曲库封面却拉不下来多半填了 Docker 内部主机名手机够不到或页面是 HTTPS 而 Navidrome 地址是 HTTP。改成各设备可达的地址需要时对齐到 HTTPS。HTTP 换成 HTTPS 后登录态和设置都没了两个地址属于不同 origin浏览器按协议 域名 端口区分的身份数据不会自动迁移。重新登录配置一遍即可地址定型后别再来回切换。能力边界与建议上手顺序手机端能做什么、不能做什么能做的在线搜索播放网易云、QQ 音乐、酷狗扫码登录一次长期有效全屏歌词动画竖屏完整可用主题排版响应式适配窄屏Navidrome 自建曲库文件留在 NAS手机流式播放装进主屏独立启动无地址栏接近原生应用体验AI 按歌生成主题配色部署时配了对应 AI 密钥才可用不能做的导入手机本地的音频文件入口在手机上不存在本地目录导入只属于桌面端桌面版的模组系统、视频导出等完整能力这些留在桌面版不同主题有不同的排版氛围和可调参数手机上换风格走「主题速编」入口即可。建议上手顺序先用一键托管把 Web 版跑起来接一个在线曲库把「搜索 → 播放 → 歌词动画」的完整流程走通。稳定之后接 Navidrome把「自己的歌」补进来。需要跨设备同步主题与设置时再升级到 Docker 全栈内置 Sync Server。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考