10 分钟把 Folia 歌词动画播放器装进手机，完整部署指南-北京尧图网络

10 分钟把 Folia 歌词动画播放器装进手机完整部署指南【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major10 分钟后你的手机主屏幕上会有一个独立的 Folia 图标点开就是全屏歌词动画播放器。前提只有一个一个 HTTPS 可达的 Folia Web 版地址——托管平台一键部署最省事Docker 主机或本地 Node 环境也都能做到。Folia 是一款以全屏歌词动画为核心的音乐播放器支持在线搜索、Navidrome 私有曲库和本地音乐库Web 版内置 PWA 能力装到手机后核心资源离线缓存弱网下也能秒开。动手之前先选路线再看清单。推荐一键托管Vercel / CloudflarePWA 的安装与离线缓存都依赖 HTTPS 安全上下文托管平台免费给证书和域名不用自己碰反向代理是阻力最小的路径。三条路线各适合一类人一键托管没有服务器、想要最快出结果选这条Docker 全栈有 NAS 或自建服务器一套 compose 拉起前端网关、音乐接口和 Sync Server适合想长期自托管的人克隆仓库本地开发要改代码、调构建才走这条成本最高不管走哪条先把这几项过一遍每项都给了确认方法一个部署账号或 Docker 主机按所选路线二选一——确认能登录托管平台或终端docker version能看到 Engine 24 与 Compose v2 的输出本地开发路线需要 Node.js 24 以上——确认node -v输出的主版本号 ≥ 24一个手机能访问到的地址——确认手机浏览器直接打开该地址能看到 Folia 启动画面地址必须是 HTTPS托管平台自带Docker 自部署要加一层反向代理挂可信证书——确认地址栏是锁形标识而不是http://注意Docker 默认入口http://NAS-IP:18080是普通 HTTP不属于浏览器安全上下文PWA 装不上本地音乐导入、音频设备选择也会降级。细节见 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节。主路径第 1 步让 Folia Web 版跑在一个地址上托管路线按 docs/technical.md 中一键部署到 Vercel一节的入口创建项目选择仓库的 main 分支平台自动拉取并构建全程不需要写配置。Docker 路线在一个空目录下载 deploy/docker/compose.yaml 和.env模板仓库 deploy/docker/ 目录内用openssl rand -hex 32生成随机串填入SYNC_TOKEN必填至少 8 位Sync 客户端靠它鉴权然后docker compose up -d --wait本地开发路线克隆仓库后执行npm install再npm run dev启动开发服务器默认监听 3000 端口。改过.env.local后必须重启 Vite因为环境变量只在启动时读取一次。确认浏览器打开你的地址能看到 Folia 的启动动画和曲库首页。Docker 部署可以再加一步curl http://NAS-IP:18080/healthz返回正常即网关健康Sync Server 对应http://NAS-IP:13000/health。第 2 步配置音源与 AI 主题的环境变量部署完只有骨架音源和 AI 主题靠环境变量点亮。变量清单见 docs/technical.md 的配置环境变量一节核心几项VITE_NETEASE_API_BASE必填网易云音乐 API 实例地址搜索播放就靠它VITE_QQ_API_BASEVercel / Cloudflare 上填/api/qq即可用仓库内置的 serverless 入口不用单独部署 API 实例配套的服务端密钥QQ_SESSION_SECRET不加VITE_前缀忘了这一项 QQ 登录路由会直接回 501VITE_AI_PROVIDERgoogle或openai再配上对应的GEMINI_API_KEY或OPENAI_API_KEYAI 主题生成就可用Docker 路线对应的是FOLIA_AI_PROVIDER与 backend 容器内的密钥最小的一组.env.local长这样VITE_NETEASE_API_BASEhttp://你的网易云API地址 VITE_QQ_API_BASE/api/qq QQ_SESSION_SECRET你的随机密钥 VITE_AI_PROVIDERgoogle注意QQ 音乐播放前必须先扫码登录登录态存在服务端手机 QQ、微信、QQ 音乐 App 都能扫。完整部署差异与排错见 docs/qq-music-deployment.md。确认重新部署生效后在首页搜索框输入一个歌名能出结果、能播放设置里触发一次 AI 主题生成能返回配色。第 3 步把 Folia 装到手机主屏幕地址跑通后手机浏览器打开它。安卓和 iPhone 从这里分叉其余通用安卓Chrome右上角 ⋮ 菜单 → 添加到主屏幕 → 确认名称是 Folia → 添加iPhoneSafari底部 ⬆️ 分享按钮 → 添加到主屏幕 → 添加仓库 index.html 已配好apple-mobile-web-app-capable、standalone显示模式等全部元标签vite.config.ts 里的 PWA 插件会生成 manifest 和 Service Worker这一步没有可配项。确认返回桌面找到图标点开后以全屏独立窗口启动没有地址栏状态栏和界面颜色融为一体——这是 standalone 模式生效的标志也是装成功的直接证据。看到效果再往前一步播放任意一首带歌词的歌全屏歌词动画是这台手机 App的核心证据。动画帧率正常、无掉帧说明 Service Worker 缓存和渲染链路都在工作。两条可选进阶路径接 Navidrome听自己的歌。手机浏览器装不了本地文件——目录导入依赖桌面浏览器的 File System Access API手机没有这个能力替代路径就是 Navidrome。在 NAS 上部署 Navidrome然后在 Folia 的.env里填齐NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项并重建 backend 容器之后任何新打开的浏览器都会自动登录并启用 Navidrome手机上不用再手动填账号。NAVIDROME_URL必须写成各设备都能访问的地址不能是 Docker 内部主机名Folia 走 HTTPS 时它也要是 HTTPS否则混合内容会被拦截。凭据下发的来源限制细节见 deploy/docker/README.md。换主题换气质。每首歌的主题可以手动切换也可以交给 AI 按歌词情绪生成。群唱cappella主题把歌词排成左右交替的对话气泡竖屏窄屏下依然好读时计pendolo是齿轮与星空轨道副歌高亮逐字亮起。不对就查这里按遇到概率从高到低排列先查第一条现象搜索没结果、某音源入口不可用 →原因对应 API 变量没配或指向的地址不通QQ 音乐忘了先登录 →动作核对VITE_NETEASE_API_BASE/VITE_QQ_API_BASE填的地址能从部署环境访问QQ 音乐先完成一次扫码登录再播放现象AI 主题生成报错或一直转圈 →原因VITE_AI_PROVIDER与密钥不配套或用了 OpenAI 兼容接口却漏填OPENAI_API_URL/OPENAI_API_MODEL→动作对照变量表补全三项后重新部署个别模型对温度有要求如kimi-k3必须是 1报错时先查模型文档现象手机找不到添加到主屏幕或 PWA 装不上、离线不生效 →原因地址是 HTTP 而非安全上下文或用了 Chrome / Safari 以外的浏览器 →动作确认地址栏是 HTTPSDocker 部署补上反向代理和可信证书换回 Chrome 或 Safari 重新加载页面现象填了 Navidrome 三项变量手机没自动登录 →原因NAVIDROME_URL手机访问不到、混合内容被拦或该浏览器曾手动关掉 Navidrome 开关 →动作手机直接打开NAVIDROME_URL验证连通性在 Folia 设置里手动打开 Navidrome 开关现象服务端更新了手机还是旧版本 →原因Service Worker 是autoUpdate策略更新在下一次冷启动才生效 →动作完全关闭后重新打开长期不更新就清除站点数据卸载图标重新添加现象HTTPS 下封面不缓存、选不了音频输出设备 →原因证书链不完整浏览器把 OPFS 和设备枚举降级了 →动作查看证书详情确认链完整自签名证书不算换可信证书后重启 PWA从头到尾一个地址、几个环境变量、一次添加到主屏幕手机主屏幕上就多了一台全屏歌词动画播放器在线搜索、Navidrome 曲库、离线秒开都在这一个图标里。变量全表与平台差异看 docs/technical.md自托管维护、证书和回滚看 deploy/docker/README.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

10 分钟把 Folia 歌词动画播放器装进手机，完整部署指南

相关推荐

Android手势密码离线破解：Python穷举389112种合法路径

JSON DOM实战：用数据描述页面，手写轻量级渲染器

Hive高级调优实战：分区裁剪、窗口函数与数据倾斜解决方案

更多资讯

从技能清单到可复现体系：构建可迁移技能栈的实操框架

知识工作流插件组合指南：采集、整理、检索、输出四段式搭建

REA：轻量级事件驱动框架，让状态变更后的动作链路清晰可控

CKA认证含金量解析：从Kubernetes运维实操到职业跃迁的真实价值

开源企业文档管理系统实战：Spring Boot 3 + Vue3 前后端分离架构拆解

阿里EDAS示例工程上云实战：本地启动、部署配置与灰度避坑指南

今日更新

微信云开发旅游小程序实战：LBS打卡+UGC社交全栈方案

金融AI代理平台核心拆解：从多代理协作到财报分析实战

基于大数据的智慧旅游推荐与可视化平台架构实践

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？