Folia 全屏歌词动画 PWA 手机安装完整指南:3 步把播放器装进主屏

发布时间:2026/11/6 1:30:23
Folia 全屏歌词动画 PWA 手机安装完整指南:3 步把播放器装进主屏 Folia 全屏歌词动画 PWA 手机安装完整指南3 步把播放器装进主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器 A multi-platform music player for local files, Navidrome, and online streaming services, featuring stunning animated lyrics.项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款以全屏歌词动画为核心的多平台音乐播放器在线曲库、Navidrome、本地曲库都吃。装完之后你会得到什么手机主屏上多出一个 Folia 图标点一下直接进全屏歌词动画界面——没有地址栏没有标签页观感跟原生 App 一样。全程要做三件事网页版上线、浏览器里出声、入口装进主屏顺序别乱。安装前先确认两件事功能边界和 HTTPS主屏安装之前先把两个前提钉死。任何一个不过关后面都是白忙。手机端能做什么、做不了什么手机端能用手机端没有在线搜索并播放导入手机本地音频文件夹全屏歌词动画—Navidrome 曲库—本地导入为什么手机上没有这功能依赖 File System Access API只有桌面端的 Chromium 系浏览器提供手机上压根不存在这个入口别花时间找。想在手机上听自己硬盘里的歌正路是 Navidrome第四节专门讲。浏览器也有讲究安卓机固定用 ChromeiPhone 固定用 Safari。其他浏览器要么没有「添加到主屏幕」这条路要么行为不一致装出来容易出问题。地址栏有没有锁HTTPS 判断 ⚠️看浏览器地址栏的锁形标志这是安装入口出现与否的开关走免费托管平台平台自带 HTTPS什么都不用管。NAS 自建给反向代理挂一张可信证书自签的不算数。锁没有PWA 安装入口根本不会出现主屏这一步就别指望了。Folia 最快上线方法一键托管还是 Docker 全栈 两条路按手头条件挑维度路线 A一键托管Vercel / Cloudflare路线 BDocker 全栈NAS / VPS适合谁没有服务器、只想最快上线的新手有 NAS 或一台 VPS想自己控制环境变量和版本大概多久几分钟半小时左右代价几乎为零HTTPS 和域名平台代管要自己拉 compose 栈、配环境变量路线 A直接用仓库首页的一键部署按钮创建项目构建完拿到访问地址就完事HTTPS 和域名都不用操心新手首选。路线 B拉完整 Web 堆栈细节都写在 deploy/docker/README.md如果只关心 QQ 音乐在 serverless 和常驻服务之间的登录方式差异单独翻 docs/qq-music-deployment.md。拿不准就走 A。跑通之后随时可以迁到 Docker两条路不冲突。Folia 手机主屏安装步骤先从网页出声再装进主屏幕最小闭环部署完怎么确认在出声按上一节选好的路线把服务拉起来。确认服务活着。Docker 路线在浏览器访问http://服务器地址:18080/healthz返回正常说明网关起来了一键托管没有这一步页面能打开、搜索有结果就算过。打开页面点顶部的「账户」登录网易云、QQ 音乐或酷狗挑一个就行。搜一首歌点播放进全屏歌词动画。听到声音、歌词在动主流程就跑通了。登录态存在手机浏览器本地登一次之后很长一段时间不用再登。安卓主屏安装步骤Chrome 添加到主屏幕用 Chrome 打开 Folia 地址。点右上角菜单⋮。选「安装应用」或「添加到主屏幕」。确认名称是 Folia点添加。验证点主屏图标直接弹出独立全屏窗口界面上找不到地址栏、标签页和浏览器按钮 ✅ 对上了就是装成了。iPhone 主屏安装步骤Safari 添加到主屏幕用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」点它。确认名称点添加。验证标准跟安卓一致全屏独立模式看不到任何浏览器痕迹才算合格。Navidrome 接入步骤把 NAS 曲库流式推到手机 PWA 原理一句话歌始终留在 NAS 上Navidrome 扫描后对外流式服务手机 PWA 只负责拉曲库、封面和歌词音频本身不进手机。在 NAS 上用 Docker 部署 Navidrome把音乐目录挂进去。打开 Folia 设置页找到 Navidrome 连接设置填服务器地址、用户名、密码点测试通过后保存。回首页Navidrome 页签下就是你的歌单和专辑直接点着播。接好之后首页长这样接对没有看两点Navidrome 地址必须是每台设备都够得到的。Folia 页面走 HTTPS 时Navidrome 也得是 HTTPS否则浏览器直接拦截混合内容。个别歌缺歌词不用慌智能匹配会自动补在线歌词歌词动画照常驱动。Folia 手机安装卡住了三问自查加一张排查表 先问自己三句入口找得到吗连得上自己的曲库吗打开的是新版界面吗哪句答不上对下表现象多半原因怎么办菜单里翻不到「添加到主屏幕」访问的是 HTTP 地址或者用的不是 Chrome / Safari换 HTTPS 地址重载页面后再找找不到本地导入入口功能边界不是 bug只有桌面端才有手机这边走 Navidrome见第四节更新之后打开还是旧界面Service Worker 的缓存策略卡住了清一次站点数据或把图标删掉重新添加Navidrome 填了却连不上写了 Docker 内部主机名或页面 HTTPS 配了 HTTP 地址改成各设备都可达的地址必要时两边都统一到 HTTPS换到 HTTPS 之后登录态没了两个地址属于不同 origin数据本来就不迁移重新登录、把配置补一遍之后别来回切之后更进一步AI 自动配色与跨设备同步跑通最小链路、接上 Navidrome 之后还有两件锦上添花的事AI 配色部署时配了 AI 密钥主题配色就能按当前歌曲自动生成入口在首页设置里快速主题编辑器还能把每个参数逐条调到位。跨设备同步外观部署 sync-server 即可细节见 docs/technical.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器 A multi-platform music player for local files, Navidrome, and online streaming services, featuring stunning animated lyrics.项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询