★ FEATURED ARTICLE Folia 手机端完整指南3 条部署路线把手机变成全屏歌词动画播放器【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major想用手机跑 Folia这篇把整条链路一次讲清先把 Web 版放到一个手机够得着的 HTTPS 地址上再以 PWA 形式装进主屏幕之后每次一点图标进来的就是一台全屏歌词动画播放器。在线曲库走网易云、QQ 音乐、酷狗NAS 上的私有曲库走 Navidrome都能跑唯一的短板是本地文件夹导入——那本来就是桌面端的能力。先看能力清单手机上能干什么、不能干什么一句话定位在手机上Folia 就是全屏歌词动画播放器内容来源是线上曲库或 Navidrome。能做的✅ 在线搜索和点歌网易云 / QQ 音乐 / 酷狗。账号绑定在手机浏览器里换机器得重新登录✅ 全屏歌词动画。竖着拿手机时歌词排版自动重排动画节奏和光效不缩水✅ Navidrome 私有曲库。曲库在 NAS 上的话这是首选封面歌词照样驱动动画✅ AI 自动生成主题配色。部署时配过 AI 密钥才亮没配就跳过这项不能做的❌ 导入本地音乐文件夹。底层用的 File System Access API 只存在于桌面端的 Chromium 系浏览器手机上没有❌ 模组系统与壁纸模式。这两样只在桌面版开放 所谓安装 Folia本质是收藏一个能全屏、能部分离线的网页。前提是 Web 版得先上线且地址必须是手机可访问的 HTTPS。上线部署三条路线同一件事三条路线只服务一个目标——拿到 HTTPS 地址。按你手上有没有服务器来挑。没有服务器托管平台一键部署约 5 分钟新手走这条Vercel 或 Cloudflare 自带 HTTPS不用碰运维。在 Vercel 或 Cloudflare 导入 Folia 仓库创建项目打开 docs/technical.md对照环境变量表补必填项最少要填VITE_NETEASE_API_BASE想用 QQ 音乐照 docs/qq-music-deployment.md 把VITE_QQ_API_BASE填成/api/qq再配上QQ_SESSION_SECRET等部署结束记下带 HTTPS 的地址有 NAS 或自建机Docker 全栈约 15 分钟在线音乐接口整个打进镜像里跟 Navidrome 放同一台机器最省心。新建目录放入 deploy/docker/compose.yaml 与环境变量模板模板说明在 deploy/docker/README.md跑openssl rand -hex 32拿一串随机字符粘进SYNC_TOKENdocker compose up -d启动浏览器打开http://NAS-IP:18080见到曲库页面就算成功⚠️ 局域网 IP 配普通 HTTP浏览器不算安全上下文PWA 装不稳也离线不了。请用 NAS 自带的反向代理挂可信证书把地址换成 HTTPS 再装反代细节看 deploy/docker/README.md。想完全自定义克隆仓库自建30 分钟起任何支持 Node.js 的平台都能落。git clone https://gitcode.com/GitHub_Trending/fo/folia-major打开 docs/technical.md 的环境变量说明备好音乐 API 地址与密钥构建完成之后丢到任意支持 Node.js 的平台手机浏览器打开地址搜索、播放都能用才算过装机两款系统各四个点击安卓 Chrome添加到主屏幕的完整路径先自查地址栏有没有 HTTPS 的锁形标志。没有锁的话添加到主屏幕选项九成不出现这是装不上时最常见的原因安卓换 Chrome、iOS 换 Safari再刷新一次页面。用 Chrome 打开 Folia 地址点右上角 ⋮ 菜单选添加到主屏幕或安装应用名字是 Folia 就点添加iPhone Safari主屏幕上加上 Folia 图标用 Safari 打开 Folia 地址点屏幕底部的分享图标上滑列表找到添加到主屏幕核对名称点添加首次打开大约会转 10 秒——这段时间 Service Worker 在本地缓存资源之后的启动会快一大截。另外页面里内置了全屏元标签iPhone 上点开之后看不到地址栏跟原生 App 混排毫无违和感。进阶用 Navidrome 把自己的歌搬上 NAS手机想播自己的音乐只有 Navidrome 这一条正路。NAS 上用 Docker 跑 Navidrome把音乐目录挂载进去在 Folia 设置页填 Navidrome 地址、用户名和密码确认之后曲库、封面、歌词都会被拉下来歌词动画照常驱动Docker 全栈用户有省事写法.env里写全NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项backend 会在浏览器新打开时把凭据推过去省去手动输入⚠️ Folia 走 HTTPS 时Navidrome 地址也必须 HTTPS否则浏览器会拒绝混合内容曲库直接连不上。装好之后更新、主题与弱网表现vite.config.ts 里声明了 PWA 的独立窗口显示与autoUpdate自动更新策略——部署新版本后下次打开就自动生效。要是卡在旧版不走清一次该站点数据或把图标删了重新装。日常可调的几项切主题主题速编里每种风格各有排版氛围参数都能细调AI 配色兼容 Google Gemini 与 OpenAI 接口读懂歌曲情绪和歌词后自动给出背景与视觉参数OLED 屏深色主题比如 Lumi 流光对比度最舒服弱网核心界面资源已预缓存首次加载完整后地铁里也能快速启动音乐流本身仍要联网【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
