Folia 歌词动画播放器 PWA 手机端部署不写代码装进安卓与 iPhone 主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款主打全屏歌词动画的音乐播放器曲库覆盖网易云、QQ 音乐、酷狗与 Navidrome。照做完你会得到一个以 PWA 形式装在手机主屏、全屏独立运行的歌词动画播放器全程不写一行代码。 先看清手机端能做什么预期先立住后面少走弯路。手机端可用的在线搜索播放三大平台全覆盖、全屏歌词动画、Navidrome 自建曲库。竖屏下歌词动画完整可用各主题排版都会响应式适配不裁剪也不拥挤。风格想换随时换走「主题速编」入口风格和参数随时可调主题配色还能让 AI 按歌曲自动生成前提是你部署时配了对应的 AI 密钥。手机端没有的导入手机本地的音频文件。本地目录导入依赖 File System Access API只有桌面端 Chromium 系浏览器支持手机端这个入口压根不存在。把手机端 Folia 理解成「歌词动画播放器 在线/Navidrome 曲库」就够了听本地文件留给桌面版。 动手前对号入座部署前先对号入座再动手。纯 HTTP 地址会导致安装入口缺失、部分浏览器能力降级所以地址栏没锁就先解决。你的现状推荐路线HTTPS 要求浏览器要求没有服务器第一次折腾一键托管Vercel / Cloudflare平台自带不用管安卓用 ChromeiOS 用 Safari已有 NAS 或服务器Docker 全栈部署自己给 NAS 配反向代理加可信证书同上想完全掌控环境变量、构建与 HTTPS克隆仓库自行部署完全自理同上 Web 版部署三条路线各走各的路线一一键托管无服务器适合第一次折腾的人。项目内置一键部署按钮支持 Vercel 与 Cloudflare点一下几分钟上线HTTPS 和域名都不用操心。QQ 音乐在托管环境可以走 serverless 形态把VITE_QQ_API_BASE配成/api/qq再加一个服务端密钥即可完整步骤见 docs/qq-music-deployment.md。验收浏览器打开生成的地址页面能渲染、地址栏有锁就算通了。路线二NAS 或服务器 Docker 全栈适合已有 NAS 的用户。编排文件是 deploy/docker/compose.yaml三步编辑.env填入SYNC_TOKEN一个至少 8 位的随机字符串是同步客户端的访问令牌。执行docker compose up -d后台启动整套服务。浏览器打开http://NAS-IP:18080把NAS-IP换成你的机器地址。验收能打开 Folia 页面即成功。端口、环境变量、反向代理的细节看 deploy/docker/README.md。路线三克隆仓库自行部署自由度最高环境变量、构建、HTTPS 全归你自己管git clone https://gitcode.com/GitHub_Trending/fo/folia-major拉取源码到本地克隆下来后按 docs/technical.md 自行配置。验收打开你自建的地址页面正常且登录、搜索、播放可用。 安装到手机主屏安卓与 iPhone 步骤部署完成后用对应浏览器打开地址安装。安卓Chrome 添加到主屏幕用 Chrome 打开 Folia 地址。点右上角菜单⋮。选「安装应用」或「添加到主屏幕」。确认名称为 Folia点添加。验收点主屏图标应用以独立全屏窗口启动、没有地址栏和标签页就算装对了。iPhoneSafari 添加到主屏幕用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」点击。确认名称点添加。验收标准相同启动即全屏独立模式看不到任何浏览器痕迹。装好后的主界面如上。网易云、QQ 音乐、酷狗的登录态存在手机浏览器里登录一次之后很长一段时间不用重复登。️ 进阶接入 Navidrome 自建曲库原理一句话歌放在 NAS 上Navidrome 扫描后以流媒体曲库对外服务手机 PWA 只负责拉曲库、封面和歌词。在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录。在 Folia 的账户页接入 Navidrome 服务。地址必须是每台设备都够得到的地址页面走 HTTPS 时它也得是 HTTPS否则浏览器会拦截混合内容。曲库与封面同步完成后直接播放缺失的歌词可以通过智能匹配自动补齐歌词动画照常驱动。这套组合省手机空间也省流量文件留在 NAS手机流式播放。桌面端本地曲库的管理方式可参考 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数据不会自动迁移。重新登录配置一遍地址定型后就不要来回切换。边界再钉一遍手机端不支持导入手机本地的音频文件本地目录导入只属于桌面端其余能力都能正常使用。推荐的上手顺序先用一键托管把 Web 版跑起来接一个在线曲库把歌词动画流程走通稳定之后再上 Navidrome把「自己的歌」补进来。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/4 11:14:18 · 阅读 1.2k Folia 歌词动画播放器 PWA 手机端部署：不写代码装进安卓与 iPhone 主屏
Folia 歌词动画播放器 PWA 手机端部署不写代码装进安卓与 iPhone 主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款主打全屏歌词动画的音乐播放器曲库覆盖网易云、QQ 音乐、酷狗与 Navidrome。照做完你会得到一个以 PWA 形式装在手机主屏、全屏独立运行的歌词动画播放器全程不写一行代码。 先看清手机端能做什么预期先立住后面少走弯路。手机端可用的在线搜索播放三大平台全覆盖、全屏歌词动画、Navidrome 自建曲库。竖屏下歌词动画完整可用各主题排版都会响应式适配不裁剪也不拥挤。风格想换随时换走「主题速编」入口风格和参数随时可调主题配色还能让 AI 按歌曲自动生成前提是你部署时配了对应的 AI 密钥。手机端没有的导入手机本地的音频文件。本地目录导入依赖 File System Access API只有桌面端 Chromium 系浏览器支持手机端这个入口压根不存在。把手机端 Folia 理解成「歌词动画播放器 在线/Navidrome 曲库」就够了听本地文件留给桌面版。 动手前对号入座部署前先对号入座再动手。纯 HTTP 地址会导致安装入口缺失、部分浏览器能力降级所以地址栏没锁就先解决。你的现状推荐路线HTTPS 要求浏览器要求没有服务器第一次折腾一键托管Vercel / Cloudflare平台自带不用管安卓用 ChromeiOS 用 Safari已有 NAS 或服务器Docker 全栈部署自己给 NAS 配反向代理加可信证书同上想完全掌控环境变量、构建与 HTTPS克隆仓库自行部署完全自理同上 Web 版部署三条路线各走各的路线一一键托管无服务器适合第一次折腾的人。项目内置一键部署按钮支持 Vercel 与 Cloudflare点一下几分钟上线HTTPS 和域名都不用操心。QQ 音乐在托管环境可以走 serverless 形态把VITE_QQ_API_BASE配成/api/qq再加一个服务端密钥即可完整步骤见 docs/qq-music-deployment.md。验收浏览器打开生成的地址页面能渲染、地址栏有锁就算通了。路线二NAS 或服务器 Docker 全栈适合已有 NAS 的用户。编排文件是 deploy/docker/compose.yaml三步编辑.env填入SYNC_TOKEN一个至少 8 位的随机字符串是同步客户端的访问令牌。执行docker compose up -d后台启动整套服务。浏览器打开http://NAS-IP:18080把NAS-IP换成你的机器地址。验收能打开 Folia 页面即成功。端口、环境变量、反向代理的细节看 deploy/docker/README.md。路线三克隆仓库自行部署自由度最高环境变量、构建、HTTPS 全归你自己管git clone https://gitcode.com/GitHub_Trending/fo/folia-major拉取源码到本地克隆下来后按 docs/technical.md 自行配置。验收打开你自建的地址页面正常且登录、搜索、播放可用。 安装到手机主屏安卓与 iPhone 步骤部署完成后用对应浏览器打开地址安装。安卓Chrome 添加到主屏幕用 Chrome 打开 Folia 地址。点右上角菜单⋮。选「安装应用」或「添加到主屏幕」。确认名称为 Folia点添加。验收点主屏图标应用以独立全屏窗口启动、没有地址栏和标签页就算装对了。iPhoneSafari 添加到主屏幕用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」点击。确认名称点添加。验收标准相同启动即全屏独立模式看不到任何浏览器痕迹。装好后的主界面如上。网易云、QQ 音乐、酷狗的登录态存在手机浏览器里登录一次之后很长一段时间不用重复登。️ 进阶接入 Navidrome 自建曲库原理一句话歌放在 NAS 上Navidrome 扫描后以流媒体曲库对外服务手机 PWA 只负责拉曲库、封面和歌词。在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录。在 Folia 的账户页接入 Navidrome 服务。地址必须是每台设备都够得到的地址页面走 HTTPS 时它也得是 HTTPS否则浏览器会拦截混合内容。曲库与封面同步完成后直接播放缺失的歌词可以通过智能匹配自动补齐歌词动画照常驱动。这套组合省手机空间也省流量文件留在 NAS手机流式播放。桌面端本地曲库的管理方式可参考 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数据不会自动迁移。重新登录配置一遍地址定型后就不要来回切换。边界再钉一遍手机端不支持导入手机本地的音频文件本地目录导入只属于桌面端其余能力都能正常使用。推荐的上手顺序先用一键托管把 Web 版跑起来接一个在线曲库把歌词动画流程走通稳定之后再上 Navidrome把「自己的歌」补进来。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考