news 2026/11/6 1:14:46

Folia 完整新手指南:从安装到全屏歌词动画的 4 步上手

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Folia 完整新手指南:从安装到全屏歌词动画的 4 步上手

Folia 完整新手指南:从安装到全屏歌词动画的 4 步上手

【免费下载链接】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

手里攒了一堆本地音乐,却总找不到一个能把歌词演出仪式感的播放器?Folia 就是冲着这件事来的:它是一个能播本地音乐、Navidrome 和网易云 / QQ 音乐 / 酷狗在线音乐的播放器,招牌则是把歌词做成全屏动画。这篇指南按你真正的使用节奏,把安装、接源、调设置一次讲清。

准备工作:装什么、要哪些账号

上手 Folia 就像搬进新家:先拿到钥匙(装好应用),再决定搬什么家具(接哪些音乐源)。它有两种形态:

  • 桌面版:Windows / macOS / Linux 安装包,内置前后端运行环境,装上即用;
  • Web 版:基于 Node.js 24+ 自部署,或一键部署到云平台,手机浏览器里还能以 PWA 形式加到主屏幕。

音乐源这边:本地曲库不需要任何账号;网易云 / QQ 音乐 / 酷狗的歌,用时用手机扫码登录即可;Navidrome 自建服务器则需要填服务器地址与账号。这些都不必提前准备好,启动后可以一步步接。

第一次打开:从启动到播出一首歌

第一次打开像新房装修:先通水电(接一个音乐源),再摆家具(导入音乐),能播出一首歌就算完工。

启动后进入首页:一张悬浮的 3D 卡片网格 Grid3D,外壳由 src/components/app/Home.tsx 组装。跑通播放有两条路:

  • 在线歌:点首页的网易云 / QQ 音乐 / 酷狗卡片进搜索页,用面板里的二维码扫码登录,然后搜歌点击播放,封面与歌词自动加载;
  • 本地音乐:在首页本地区域选“导入文件夹”,Folia 递归扫描目录并读取标题、艺术家、ReplayGain、内嵌歌词与封面;支持 MP3、FLAC、M4A、WAV、OGG、Opus、AAC,同目录放一个同名.lrc(或.vtt等)文件会自动挂上,完整扫描规则见 docs/local-library-management.md。

歌曲一响,歌词画面自动铺满整个窗口,播放操作集中在右下角的统一面板 src/components/UnifiedPanel.tsx。

💡 提示:Web 版导入文件夹依赖浏览器的 File System Access API,页面提示不支持时换桌面版即可。

界面入口速查:每块屏幕管什么

整个界面像一张地铁图:每个“站”都是一个入口,扫一眼就知道要办什么事在哪个站下车。

入口干什么一句话说明
首页卡片网格浏览集合与歌曲歌单、专辑、文件夹、歌手都是卡片,点进去逐层深入,可返回
顶部维度页签切换浏览视角网格在 Playlists / Radio / Albums / Folder 等维度间切换
右上角搜索框快速找歌登录后输入关键词直接搜在线歌曲
右下角统一面板高频播放操作顶部一排页签,每个页签都是src/components/panelTab/下的独立组件
左上角齿轮图标打开设置弹窗偏好按“通用”“外观”“播放控制”等子页分组

面板里的页签覆盖日常:封面跳转、播放控制(音量、进度、ReplayGain)、队列排序、账号扫码登录、本地 / 在线歌词切换都在手边。

💡 提示:面板打开时按Tab键可循环切换页签,Shift + Tab 往回切,切歌间隙不用挪鼠标,实现见 src/hooks/usePlayerPanelTabShortcut.ts。

第一次用,先改哪几项设置

设置像提车验车:先看座椅、后视镜和车机这些天天要摸的,别去动“发动机调校”。

先动这几项:

  • 通用:界面语言、启动行为(自动播放、标题栏按钮);
  • 外观:主题模式、自定义主题;
  • 播放控制:ReplayGain(让不同歌曲的响度听起来一致)、音频输出设备;
  • 连接与集成:Navidrome 服务器、多设备同步服务、歌词接口。

先别碰这几项:

  • 图形 / 开发者:渲染与调试开关,进阶用户才需要;
  • 模组:实验性功能,默认关闭,仅桌面版可用。

招牌能力:全屏歌词动画

Folia 的记忆点是把歌词搬上舞台——像剧院换幕布和灯光:剧本(歌词)没变,每种模式用不同的“舞美”呈现。17 种内建动画模式统一注册在 src/components/visualizer/registry.tsx,默认是classic;每种模式带独立参数面板,相机速度、辉光、字号都能微调,背景还能按歌曲情绪与歌词由 AI 生成。

两种风格值得先试:

  • 浮名(Fume):油墨层次铺满画面,镜头追着正在唱的那一行漂移;
  • 群唱(Cappella):一群角色用对话气泡轮流开唱。

任务速查

速查表就像贴在冰箱上的便签:开听之前瞄一眼,以后要干什么去哪找一目了然。

我要干什么去哪操作
添加一个本地音乐文件夹首页本地区域“导入文件夹”
播放在线歌曲点首页平台卡片扫码登录,再搜索
接入 Navidrome设置 → 连接与集成
调整队列顺序 / 移除歌曲右下角面板“队列”页签
切换歌词动画模式播放页动画模式切换器(默认 classic)
清理缓存、开启多设备同步设置 → 存储与备份

【免费下载链接】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),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/11/6 1:14:16

六轮摇臂转向架火星探测车 100 小时动手建造指南

六轮摇臂转向架火星探测车 100 小时动手建造指南 【免费下载链接】open-source-rover A build-it-yourself, 6-wheel rover based on the rovers on Mars! 项目地址: https://gitcode.com/gh_mirrors/op/open-source-rover 客厅地板,就是你的第一块火星地表。…

作者头像 李华
网站建设 2026/11/6 1:14:13

还不了解 Pinia 状态管理库⁉️

还不了解 Pinia 状态管理库⁉️🍍 什么是Pinia❓状态管理工具⁉️: 学习过Vue2的小伙伴,一定都知道Vuex,什么不知道,请看VCR👉 ; Vuex 是一个专为 Vue.js 应用程序设计的状态管理库&#xff0…

作者头像 李华
网站建设 2026/11/6 1:14:05

dsh-web 插件安装指南:一条命令把 DSH 界面改成你想要的样子

dsh-web 插件安装指南:一条命令把 DSH 界面改成你想要的样子 【免费下载链接】dsh-web DeepSeek Harness (DSH) Web 插件聚合生态 万物皆插件,通过创意工坊分发||DeepSeek Harness (DSH) Web Plugin Aggregation Ecosystem Ever…

作者头像 李华
网站建设 2026/11/6 1:11:37

报错:文件夹在另一个程序中打开无法删除怎么办

问题 当我们要删除一个文件或卸载一个应用时,会提示该文件或该文件夹在另一个程序中打开无法删除。解决方式一打开任务管理器:右击电脑下方任务栏找到性能——打开资源监视器——搜索句柄右击杀死 / 结束进程即可该问题就此解决解决方式二 先记住一句话 …

作者头像 李华
网站建设 2026/11/6 1:10:30

Linux 基础入门学习:(JavaEE~大数据篇)

Linux 基础入门 前言: 本篇,不是面向运维级别的 liunx系统学习, 而是针对Java——大数据学习, 所需要的基本功能~ Linux 总而言之,根本也就是一个 操作系统! 操作系统, 作为一个程序员 现代人每天都会有很多接触: 常见的操作系统…

作者头像 李华
网站建设 2026/11/6 1:08:34

12V25A 300W LLC谐振开关电源设计实战:从参数到绕制调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华