15 分钟把 Folia 装进手机主屏幕完整歌词动画播放器部署指南【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一个把全屏歌词动画做进播放器里的 Web 应用接网易云、QQ 音乐、酷狗、Navidrome 和本地曲库。这篇文章写给想在手机上用它的人跟着做完你的主屏幕上就多一个全屏歌词动画播放器在线搜索、私有曲库、AI 主题配色全都能跑。Folia 是什么一个装在手机上的歌词动画播放器一句话定义Folia 是以全屏沉浸式歌词播放为核心的音乐播放器网页打开就是完整形态再装成 PWA 就拥有独立窗口和离线启动。核心能力就四条全屏歌词动画每种风格带独立排版氛围和可调参数窗口尺寸变了自动重新分行多源曲库网易云、QQ 音乐、酷狗、Navidrome 在线拉取封面与歌词照常驱动动画AI 主题配色按歌曲情绪和歌词生成背景与视觉参数部署时配了 AI 密钥才可用PWA 独立窗口vite.config.ts 声明了standalone显示模式和autoUpdate更新策略手机场景下能做什么、不能做什么看这张表就够能力手机原因在线搜索与播放网易云 / QQ / 酷狗✅登录态存在手机浏览器里换机要重新登录全屏歌词动画与主题切换✅排版随竖屏自动重排动画和光效不受影响Navidrome 私有曲库✅封面歌词照常驱动是 NAS 场景首选本地音乐文件夹导入❌依赖 File System Access API只有桌面 Chromium 系浏览器有模组系统、壁纸模式❌桌面版专属能力 定位一句话手机上把 Folia 当歌词动画播放器 在线/Navidrome 曲库用是最合适的打开方式导入本地文件夹这类需求留在桌面端。开始前先确认4 个前置条件先别动手部署这四件事确认完再走后面的路线。地址必须是 HTTPS。这是最硬的门槛局域网 IP 的普通 HTTP 不属于浏览器安全上下文Service Worker 装不稳、离线也跑不了。免费托管平台自带 HTTPS自建部署则要靠反向代理加可信证书把地址变成 HTTPS配置细节见 deploy/docker/README.md。浏览器用 Chrome 或 Safari。安卓装 PWA 走 Chrome 菜单iPhone 走 Safari 分享面板别用第三方浏览器。音乐 API 地址要填。部署时按 docs/technical.md 的环境变量表补齐必填项至少要有VITE_NETEASE_API_BASE变量填错或不填装好手机后打开就是能看不能听。账号在手机浏览器里登录。在线曲库的登录态跟着手机浏览器走部署完第一次打开时顺手登录即可换机需要重来一遍。选一条路线跑起来三条路线各适合一种人对号入座路线适合谁大致耗时一句话特点免费平台一键部署Vercel / Cloudflare新手5 分钟自带 HTTPS不用自己管服务器Docker 全栈部署NAS / 自建服务器用户15 分钟音乐 API 随栈打包和 Navidrome 同机省事克隆仓库自行部署想完全自定义30 分钟以上任何支持 Node.js 的平台都能跑路线一免费平台一键部署在 Vercel 或 Cloudflare 导入 folia-major 仓库并创建项目按 docs/technical.md 的环境变量表补齐必填项最少填VITE_NETEASE_API_BASE要用 QQ 音乐按 docs/qq-music-deployment.md 把VITE_QQ_API_BASE填成/api/qq并配上QQ_SESSION_SECRET等构建完成拿到带 HTTPS 的地址路线二Docker 全栈部署新建一个空目录放入 deploy/docker/compose.yaml 和环境变量模板执行openssl rand -hex 32生成随机串填入SYNC_TOKEN至少 8 位不填会拒绝启动执行docker compose up -d启动浏览器访问http://NAS-IP:18080看到曲库页面即成功⚠️ 局域网 IP 的普通 HTTP 不属于安全上下文PWA 装不稳也离线不了。用 NAS 自带的反向代理加可信证书把地址改成 HTTPS 再装代理要传递Host、X-Forwarded-Proto、X-Forwarded-For等头。路线三克隆仓库自行部署执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major按 docs/technical.md 准备音乐 API 地址与 AI 密钥等环境变量构建后部署到任意支持 Node.js 的平台手机浏览器打开页面确认能正常搜索播放装到手机安卓 Chrome 与 iPhone Safari 步骤装的动作本身不复杂九成失败都栽在 HTTP 上所以第一步永远是确认地址栏有锁形标志。安卓Chrome 添加到主屏幕用 Chrome 打开 Folia 地址确认地址栏有 HTTPS 锁形标志点右上角菜单⋮选添加到主屏幕或安装应用确认名称显示为 Folia点添加iPhoneSafari 添加到主屏幕用 Safari 打开 Folia 地址点底部分享按钮上滑找到添加到主屏幕并点选确认名称后点添加首次点开会转圈 10 秒左右那是 Service Worker 在做首次缓存之后启动快得多。iPhone 上因为页面内置了全屏元标签点开后没有地址栏和原生 App 混排在一起。进阶玩法主题、AI 配色与 Navidrome 私有曲库装好只是开始Folia 的可玩度主要在这两块。竖着拿手机时歌词按窗口尺寸自动重新分行动画速度和光效不受影响部署新版后Service Worker 走autoUpdate策略下次打开自动生效。切换主题主题速编入口里每个风格都带独立的排版氛围和可调参数OLED 屏幕看深色主题如 Lumi 流光对比度最舒服AI 配色支持 Google Gemini 与 OpenAI 兼容接口根据歌曲情绪和歌词生成背景与视觉参数部署时没配 AI 密钥就跳过这步把自己的歌放到 Navidrome手机导入不了本地文件夹但 NAS 上的歌可以通过 Navidrome 接进来在 NAS 上用 Docker 跑 Navidrome挂载音乐目录在 Folia 设置里填 Navidrome 地址、用户名和密码确认后 Folia 拉取曲库、封面与歌词歌词动画照常驱动Docker 全栈用户有省事做法在.env里填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项backend 会向新打开的浏览器自动下发凭据⚠️ Folia 走 HTTPS 时Navidrome 地址也必须是 HTTPS否则浏览器拦截混合内容曲库直接连不上。模组系统同样是进阶方向但它属于桌面版能力手机上用不到这里就不展开了。出问题时问答排错与上线前自查装的时候找不到添加到主屏幕 / 安装应用九成是地址不是 HTTPS。先用锁形标志确认安全上下文安卓换 Chrome、iOS 换 Safari再重新加载一次页面。服务器更新了手机上还是旧版Service Worker 是autoUpdate策略正常情况下次打开自动刷新。长时间没变的话清除一次站点数据或删掉图标重新装。手机能不能直接导入手机里的音乐文件不能。本地目录导入只有桌面端 Chromium 系浏览器支持File System Access API 的限制手机端的自己的歌走 Navidrome 方案。地铁、弱网环境打不开吗能。核心界面资源已被预缓存首次加载完成后弱网也能快速启动音乐流本身仍需网络。上线前自查清单逐项核对全过就可以正式用了地址栏有锁形标志HTTPS吗用的是 Chrome 或 Safari 吗部署时网易云等音乐 API 地址填了吗主屏幕图标名称显示为 Folia 吗首次打开等了约 10 秒让缓存完成吗【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考