Folia Web 版部署与手机端 PWA 安装指南:如何 10 分钟把歌词动画播放器装进手机
Folia Web 版部署与手机端 PWA 安装指南如何 10 分钟把歌词动画播放器装进手机【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是主打歌词动画的音乐播放器支持网易云、QQ 音乐、酷狗在线音源和 NAS Navidrome 曲库。这里带你走完 Web 版部署加手机 PWA 安装全程自己跑起服务、把 Folia 装到手机主屏、出问题时知道先查哪里。先花 20 秒判断这条路通不通先给结论满足下面三条这条路就能走通。浏览器安卓用ChromeiPhone 用Safari其他浏览器没有安装入口。地址部署地址必须是 HTTPS地址栏带锁。NAS 裸 HTTP 的话先套一层反向代理加可信证书再说。音源网易云 / QQ 音乐 / 酷狗在线或 NAS 上的 Navidrome二者占其一即可。手机端能力速览一条一条看在线搜索播放网易云、QQ 音乐、酷狗三个源都支持。全屏歌词动画支持各主题自动适配竖屏。Navidrome支持听 NAS 上的歌。AI 按歌曲自动出主题配色支持部署时配 AI 密钥即可。导入手机本地文件不支持。本地目录导入依赖桌面端才有的 File System Access API手机上没有这个入口属于设计使然。桌面版模组系统手机端没有。跟着走从部署到主屏图标拿到一个手机够得着的地址。没有服务器用仓库首页的一键部署按钮Vercel 或 Cloudflare几分钟出公网 HTTPS 地址域名证书都不用你管。 有 NAS取deploy/docker/compose.yaml和.env.example两个文件放进同一目录后者改名.env把openssl rand -hex 32的输出填进SYNC_TOKEN至少 8 位依次执行docker compose config、docker compose pull、docker compose up -d --wait再用docker compose ps确认全部 running。访问http://NAS-IP:18080看到界面即成功手机装 PWA 前要套反向代理和可信证书改成 HTTPS详见 deploy/docker/README.md。 想完全自己管git clone https://gitcode.com/GitHub_Trending/fo/folia-major按 docs/technical.md 的环境变量表配好发布到任意支持 Node.js 的平台QQ 音乐的 serverless 形态可另查 docs/qq-music-deployment.md。填环境变量。VITE_NETEASE_API_BASE网易云 API 实例地址是唯一必填项。QQ 音乐在托管平台把VITE_QQ_API_BASE填成/api/qq再配一个不带VITE_前缀的服务端密钥QQ_SESSION_SECRET不用单独部署 API 实例Docker 栈则内置了 QQ 和酷狗服务。想用 AI 主题再加VITE_AI_PROVIDER和对应密钥。变量全表见 docs/technical.md。用浏览器验证一次。访问地址界面能打开、能搜歌、能出声继续下一步。加到主屏。安卓Chrome 里点右上角菜单⋮→ 选「安装应用」或「添加到主屏幕」。iPhoneSafari 里点底部分享按钮 → 上滑找到「添加到主屏幕」。确认名称是 Folia添加。装完先点一下再说说能玩什么点主屏图标窗口直接全屏拉起没有地址栏、没有标签页。如果还看到浏览器界面说明没装成回上面第 4 步重来。连上网易云后的主界面长这样登录态存在手机浏览器里网易云、QQ 音乐、酷狗各扫一次码很长一段时间不用重复登录。歌词动画是手机端的主角铺满竖屏各主题的排版都会响应式适配不裁剪也不拥挤。下面是「群唱」主题的效果主题随时在「主题速编」入口调风格和参数部署时配了 AI 密钥的话配色还能跟着歌曲内容自动生成。进阶接上 NAS 自己的歌原理一句话音乐文件留在 NASNavidrome 扫描后以流媒体方式对外服务手机 PWA 只拉曲库、封面和歌词不占手机存储。在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录。在 Folia 的账户页填 Navidrome 地址。地址要每台设备都够得到Folia 走 HTTPS 时它也得是 HTTPS否则浏览器拦截混合内容。Docker 部署可以在.env里填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD做预置账号新打开的浏览器会自动登录说明见 deploy/docker/README.md。曲库和封面同步完直接播放缺的歌词可以智能匹配自动补齐动画照常驱动。卡住的时候对着症状下药现象浏览器菜单里没有「添加到主屏幕」。原因访问的是 HTTP 地址或浏览器不是 Chrome / Safari。修法换成 HTTPS 地址再重载页面。现象更新之后手机里还是旧界面。原因Service Worker 的更新要下次打开才生效偶尔会卡住。修法清一次站点数据或把图标删掉重新添加。现象Navidrome 连上了曲库却加载不出来。原因填了手机够不到的 Docker 内部主机名或 HTTPS 页面里填了 HTTP 地址被当混合内容拦掉。修法改成各设备都可达的地址需要时把协议对齐到 HTTPS。现象切到 HTTPS 之后登录态全没了。原因HTTP 和 HTTPS 是两个不同 originIndexedDB、登录态、设置都不会自动迁移。修法重新登录、把配置再过一遍之后别来回切协议。想在手机上听桌面级歌词动画、又不想把歌塞进手机这条路就适合你反过来说如果你的前提是往手机存储里放歌、或必须依赖本地文件导入那请留在桌面版。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考