★ FEATURED ARTICLE Folia 手机端完整指南全屏歌词动画播放器用 Docker 部署并以 PWA 装入手机主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major把 Folia 歌词动画播放器部署到手机够得到的地址装进手机后当独立 App 使用曲库来自在线平台或自建 Navidrome。部署前准备清单HTTPS、浏览器与曲库来源准备项要求缺了会怎样访问地址HTTPS浏览器安全上下文部分网页能力只对可信地址开放PWA 无法安装或不可靠部分浏览器接口降级手机浏览器安卓用 ChromeiOS 用 Safari菜单里没有「添加到主屏幕」入口装不了曲库来源在线平台账号网易云、QQ 音乐、酷狗或自建 Navidrome开源流媒体服务器扫描本地音乐目录后供其他应用点播应用能打开却没有可播内容以上三项缺哪项就卡在对应那一环先补齐再动手。Docker 全栈部署compose 文件加一条 up 命令在 NAS 或服务器上把仓库自带的 Compose 编排文件描述整套容器服务如何启动的文件拉下来即可不要求下载整个源码mkdir folia-docker cd folia-docker—— 建一个专用目录之后所有文件都放这里。curl -fL https://raw.githubusercontent.com/chthollyphile/folia-major/main/deploy/docker/compose.yaml -o compose.yaml—— 下载编排文件。curl -fL https://raw.githubusercontent.com/chthollyphile/folia-major/main/deploy/docker/.env.example -o .env—— 下载环境变量模板并命名为.env。openssl rand -hex 32—— 生成一串随机字符把它填进.env的SYNC_TOKEN这是同步服务要求的访问令牌至少 8 位。docker compose up -d—— 拉取镜像并在后台启动整套服务。浏览器打开http://NAS-IP:18080把 NAS-IP 换成服务器实际地址能看到 Folia 页面即成功。其余路线各给一个指向如果你不想维护服务器就走 Vercel 一键托管QQ 音乐在托管环境把VITE_QQ_API_BASE填成/api/qq并配一个服务端密钥即可细节在 QQ 音乐部署指南。如果你要自己掌握环境变量、构建和 HTTPS就执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major克隆仓库后按 部署文档 自建。手机安装与验证安卓 Chrome 与 iOS Safari安卓 Chrome 添加 Folia 主屏用 Chrome 打开 Folia 地址。点右上角菜单⋮。选「添加到主屏幕」或「安装应用」。确认名称为 Folia点添加。启动后是独立全屏窗口没有地址栏和标签页说明装对了。iPhone Safari 添加 Folia 主屏用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」。确认名称点添加。图标从手机桌面启动后直接进入播放界面看不到任何浏览器边框就是装对了。网易云、QQ 音乐、酷狗的登录态存在这台手机的浏览器里登录一次长期有效。接入自建曲库歌曲存放、Navidrome 扫描与手机取用文件流向是一条线歌曲文件留在 NAS 或硬盘上Navidrome 扫描目录后建立索引、对外提供流媒体接口手机上的 Folia 只负责拉取歌曲列表、封面和歌词来驱动播放不下载完整文件。在 NAS 上用 Docker 部署 Navidrome 并挂载音乐目录后到 Folia 的账户页填入它的地址与账号。地址必须每台设备都够得到容器内部主机名手机访问不到填了也连不上协议要和 Folia 页面一致页面走 HTTPS 时它也得是 HTTPS否则浏览器拦截混合内容。连接成功后曲库、封面和歌词随扫描结果同步过来缺失歌词可以走智能匹配补齐播放动画照常驱动。出问题先查这张表现象原因处理菜单里没有「添加到主屏幕」访问的是 HTTP 地址或没用 Chrome / Safari换 HTTPS 地址并换对应浏览器重新加载线上已更新手机打开还是旧界面PWA 缓存策略导致更新偶尔不生效清除该站点数据或删掉图标重新添加Navidrome 连上但拉不到歌曲与封面地址写成容器内部主机名或协议与页面不一致改成各设备可达的地址需要时对齐到 HTTPSHTTP 换 HTTPS 后登录态与设置全丢两种协议属于不同源数据不会迁移重新登录配置一遍地址定型后别再切换能力边界与上手顺序手机端没有本地目录导入入口它依赖只有桌面版浏览器才有的文件系统接口想听自己的歌就接 Navidrome 补上。建议先走托管或 Docker 路线把地址跑起来登录一个在线账号把歌词动画流程跑通稳定之后再接入自建曲库。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
