企业官网建设流程全解析

把 Folia 全屏歌词动画播放器装进手机主屏：PWA 安装 + 自建曲库 3 步搞定

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

Folia 是一款全屏歌词动画音乐播放器，支持网易云、QQ 音乐、酷狗和 Navidrome 曲库。没有服务器也能上手，这篇带你几步把它放进手机主屏，还能流式播放你自己的歌。

📸 先看效果：装进主屏后的 Folia 长什么样

装好后点一下主屏图标，就是一块全屏歌词动画。竖屏排版完整可用，各主题响应式适配，不裁剪也不拥挤。下面是两个真实主题渲染，手机端效果一致。

想换风格随时进「主题速编」调参数；配色还能让 AI 按歌曲自动生成，前提是部署时配了 AI 密钥。

🗺️ 先选路线：Folia Web 部署 3 种走法对比

按现状对号入座，走最短的路：

选完路线先花 10 秒自查三点：地址栏有没有锁标志（HTTPS 是 PWA 安装入口的硬性前提，HTTP 地址装不上）；安卓用 Chrome、iPhone 用 Safari，别的浏览器可能没有安装入口；手机端不能导入本地音频文件，在线曲库和 Navidrome 都可以用。

🚀 目标一：让 Folia Web 版能在手机打开

走法 A：一键托管（没有服务器）点项目提供的一键部署按钮，Vercel 与 Cloudflare 任选一个，几分钟上线，HTTPS 和域名都免管。想用 QQ 音乐的话，把VITE_QQ_API_BASE填成/api/qq并加一个服务端密钥即可，细节见 QQ 音乐部署指南。

走法 B：Docker 全栈（有 NAS 或服务器）

1. 在部署目录里编辑.env，填入SYNC_TOKEN——一个至少 8 位的随机字符串，是同步客户端的访问令牌。
2. 执行docker compose up -d（后台启动整套服务）。
3. 浏览器打开http://NAS-IP:18080，把NAS-IP换成你机器的地址。

端口、反向代理等细节见 Docker 部署说明。

走法 C：克隆仓库（想完全控制）git clone https://gitcode.com/GitHub_Trending/fo/folia-major（下载整个项目源码），之后环境变量、构建、HTTPS 全按 部署文档 自己配，自由度最高。

怎么判断部署成功：手机浏览器打开地址，主界面完整渲染出来、能搜到歌，这一步就齐了。

📲 目标二：安卓 / iPhone 添加主屏 4 步装好 Folia PWA

PWA（Progressive Web App）说白了就是「浏览器里可安装的网页」，装好后以独立应用形式启动，和原生 App 感觉一致。

安卓：Chrome 添加到主屏幕 4 步

1. 用 Chrome 打开 Folia 地址。
2. 点右上角菜单（⋮）。
3. 选「安装应用」或「添加到主屏幕」。
4. 确认名称为 Folia，点添加。

iPhone：Safari 添加到主屏幕 4 步

1. 用 Safari 打开 Folia 地址。
2. 点底部中间的分享按钮。
3. 上滑找到「添加到主屏幕」，点一下。
4. 确认名称，点添加。

完成校验（两平台相同）：点主屏图标启动，画面是独立全屏窗口，没有地址栏、没有标签页，就是装对了。

装好后登录态存在手机浏览器里，网易云、QQ 音乐、酷狗各登一次，很长一段时间不用重登。

🎵 目标三：Navidrome 自建曲库 3 步接入

原理一句话：歌留在 NAS 上，Navidrome 扫描后以流媒体曲库对外服务，手机 PWA 只负责拉曲库、封面和歌词，不占手机空间也不费流量。

1. 在 NAS 上用 Docker 部署 Navidrome，挂载你的音乐目录。
2. 在 Folia 的账户页接入 Navidrome 服务，填地址和账号。
3. 曲库与封面同步完成后直接播放；缺歌词的歌由智能匹配自动补齐，歌词动画照常驱动。

地址有两个硬性要求，记牢：一、必须每台设备都够得到（别填 Docker 内部主机名，手机根本连不上）；二、协议要和页面一致（页面走 HTTPS 时它也得是 HTTPS，否则浏览器会拦截混合内容——就是 HTTP 和 HTTPS 资源不能混着加载的规则）。

遇到问题时：5 个高频问题的快速处理

• 菜单里找不到「添加到主屏幕」→ 多半是 HTTP 地址，或没用 Chrome/Safari → 换成 HTTPS 地址并换成对应浏览器，重载一次页面。
• 线上已更新，手机打开还是旧版→ Service Worker（浏览器里负责缓存页面、控制更新时机的后台机制）的自动更新偶尔卡住 → 清除一次该站点的浏览器数据，或删图标重新添加到主屏。
• 手机端没有本地导入入口→ 本地目录导入依赖 File System Access API，只有桌面端 Chromium 系浏览器支持 → 听「自己的歌」走 Navidrome 路线，本地导入留给桌面版。
• Navidrome 连上了，曲库和封面拉不下来→ 多半填了 Docker 内部主机名，或页面 HTTPS 而它是 HTTP → 改成各设备可达的地址，需要时对齐到 HTTPS。
• HTTP 换成 HTTPS 后，登录态和设置全没了→ 两个地址属于不同 origin（浏览器按「协议+域名」划数据隔间，跨隔间数据不通）→ 重新登录配置一遍；地址定型后别来回切换。

手机能力边界与建议上手顺序

边界说清：手机端不支持导入手机本地的音频文件，本地目录导入只属于桌面端；在线搜索播放、歌词动画、Navidrome 曲库全都正常。

建议按这个顺序推进：先用一键托管把 Web 版跑起来，接一个在线曲库把歌词动画流程走通；稳定之后再加 Navidrome，把「自己的歌」补进来。

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major