首页
/
行业洞察
/
正文
INDUSTRY INSIGHT · 深度
Folia 移动端部署完整指南:如何把全屏歌词动画播放器装进手机主屏幕
📅 2026/10/30 13:51:49
✍️ 爱科研究院
👁 阅读 3,247
Folia 移动端部署完整指南如何把全屏歌词动画播放器装进手机主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major手机里缺一个能看歌词动画的音乐播放器Folia 主打全屏歌词动画支持网易云、QQ 音乐、酷狗等在线音源。本文教你十分钟内把它的 Web 版装进手机主屏幕点开就是独立 App。做完你能得到什么主屏幕多一个 Folia 图标点它直接全屏启动没有地址栏。登录任一音源后即可搜索播放竖屏时歌词动画会按窗口尺寸实时重排。选一条更轻的路线路线费用技术门槛域名/证书适合谁免费平台Vercel免费低点按钮即可平台自带 HTTPS绝大多数人NAS 自架Docker已有设备中需装 Docker需另配反向代理有 NAS 的人桌面端 Electron免费最低不需要只要电脑用没有设备、只想马上用的选第一条家里已有 NAS 且想要私有部署的选第二条。照着四步装好第一首歌克隆仓库git clone https://gitcode.com/GitHub_Trending/fo/folia-major在 docs/technical.md 找到 Deploy with Vercel 按钮点击创建项目并关联仓库平台分配一个 HTTPS 地址。在平台的环境变量设置里补VITE_NETEASE_API_BASE填你的网易云 API 实例地址VITE_QQ_API_BASE填/api/qqQQ_SESSION_SECRET存为 SecretQQ 变量说明见 docs/qq-music-deployment.md。重新部署后手机浏览器打开该地址首页正常渲染即成功。安卓 Chrome 点右上角三点菜单选添加到主屏幕或安装应用iPhone Safari 点底部分享图标选添加到主屏幕。看到 Folia 图标出现在桌面即成功。项目 PWA 声明见 vite.config.tsdisplay为standaloneiOS 全屏标签已内置两端无需额外配置。点开图标选网易云、QQ 音乐或酷狗扫码登录接 Navidrome 则在账户页填地址与账号。搜到歌、动画开始全流程结束。Docker 路线把 deploy/docker/compose.yaml 和.env.example放入同一目录.env里填FOLIA_IMAGE_NAMESPACEpapersman用openssl rand -hex 32生成SYNC_TOKEN至少八位QQ 用户再补QQ_SESSION_SECRET。执行docker compose up -d浏览器访问http://NAS-IP:18080细节见 deploy/docker/README.md。常见问题装不进主屏幕PWA 安装要求安全上下文裸 HTTP 站点不满足。改用 HTTPS 地址安卓用 Chrome、iPhone 用 Safari刷新一次。重新部署后手机还是旧界面Service Worker 按 autoUpdate 策略更新时机不可控。清除一次站点数据或移除图标后重新添加。QQ 音乐入口点不动serverless 形态缺VITE_QQ_API_BASE与QQ_SESSION_SECRET两个变量。补齐后必须重新构建部署该变量是构建时写进前端的。Navidrome 自动登录没生效NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项只填了部分或 URL 不是完整 http(s) 地址。补齐三项并确认可从手机直连该地址再重建 backend 容器。手机想听本地音乐文件目录导入依赖 File System Access API只有桌面 Chromium 系浏览器提供手机浏览器没有入口替代路线走 Navidrome。弱网能离线吗界面资源有 Service Worker 缓存页面能很快打开但音乐流必须走网络做不到完全离线。一条地址、一次添加Folia 就成了口袋里的全屏歌词动画播放器换设备时浏览器里再走一遍添加到主屏幕即可。部署细节与环境变量从 docs/technical.md 或 deploy/docker/README.md 入手。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
📌 标签:
工业官网
设计趋势
AI 建站
SEO
获取完整报告 →
RELATED ARTICLES
推荐阅读
2026/10/30 13:46:46
FluxVLA快速上手指南:从LIBERO数据集下载到多卡评测,手把手跑通你的第一个VLA模型
2026/10/30 13:46:46
【亲测有效】PCIe 规范 1.0a 到 5.0 版本对比指南:PCI Express 文档合集快速选型
2026/10/30 13:46:46
【免登录下载】华为HDB Interface驱动怎么下载?完整安装包与安装步骤一次讲清
2026/10/30 14:37:06
如何选对 AMD NPU 文生图模型:FLUX.2-klein-4B 对比 FLUX.1-schnell 完整选型指南
2026/10/30 14:37:06
ACE-Step 1.5 音乐生成模型全景解读:文本变48kHz立体声歌曲的完整旅程
2026/10/30 14:37:06
基于Spring Boot+Vue的个人理财系统从源码到部署实战解析
2026/10/30 14:37:06
500多个App塞进一个AI助手后,我看懂了:工具生态正在被“统一插座”重排
2026/10/30 14:37:06
a7c2-fl23-research FL2/FL3实战:如何启用、移除并验证索尼A7C II的新创意外观
2026/10/30 14:32:06
Spring Boot美食分享网站源码解析:从分层架构到部署避坑实战指南
2026/10/30 0:03:44
OpenShell 完全定制指南:从安装到深度配置,打造高效 Windows 开始菜单
2026/10/30 0:03:44
Superpowers技能体系全解析:从Skills引入到安装的完整指南
2026/10/30 0:03:44
TensorFlow实现Weibull生存模型预测债券违约概率
2026/10/29 21:03:42
全国计算机二级C语言真题PDF高效刷题指南
2026/10/29 21:03:35
requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南
2026/10/29 21:03:28
递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现
2026/10/30 3:44:27
我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频
2026/10/30 3:44:25
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证
2026/10/30 3:44:29
2026 大模型集体涨价:用 Python 做企业 Token 成本测算与选型避坑(附配置)