Folia 全屏歌词播放器上手教程:14 种歌词动画,10 分钟点亮整块屏幕

Folia 全屏歌词播放器上手教程:14 种歌词动画,10 分钟点亮整块屏幕

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

Folia 是一款支持网易云、QQ 音乐、酷狗、本地音乐库和 Navidrome 的歌词动画播放器,最大的卖点是把歌词变成全屏沉浸式文字 PV。这篇上手教程带你从开机走到第一首全屏歌词,全程不超过 10 分钟。

第一次打开,三步听到第一首歌

首页不是歌曲列表,而是一张悬浮的 3D 卡片网格,每张卡片对应一个音乐入口,可以点进去、逐级退回来。

  1. 点首页的网易云卡片,进入该平台的搜索页;
  2. 在搜索框输入歌名,点结果里的任意一首,播放立刻开始,封面和歌词会自动加载;
  3. 在播放页进入全屏歌词模式,第一句歌词就会在你眼前动起来。

三步走完,你就站在 Folia 最核心的体验里了。整个导航由 src/hooks/useAppNavigation.ts 驱动,点卡片进去、再点回去,层级不会乱。

你的歌从哪儿来:四种入口一张表

选项获取方式适合谁
网易云 / QQ / 酷狗右下角面板扫码登录后在线搜歌想随手听在线曲库的人
本地音乐库导入电脑上的文件夹,递归扫描建索引,只存本地不上传有大量本地音频的人
Navidrome填入自建 Navidrome 服务地址连接自建音乐服务的人
个人 FM电台模式随机推歌懒得挑歌的人

本地库支持 MP3、FLAC、M4A 等 7 种格式,导入后首页会出现"导入文件夹"和"刷新"按钮。它还会自动给本地歌曲匹配在线歌词和封面,规则写得很细,想深挖可以翻 本地音乐库管理文档。

高频操作都在右下角面板,查这张表就够了

Folia 把高频操作收在屏幕右下角的统一面板里,顶部一排页签各管一摊,代码在 src/components/panelTab/ 目录:

操作位置效果
切歌、随机、循环、音量播放控制页立即生效,不打断当前歌曲
拖拽排序、移除歌曲播放列表页队列顺序实时更新
扫码登录、平台切换账号页换在线歌曲来源
导入文件夹、刷新扫描本地库页重建索引并补歌词封面
切换歌词来源在线歌词页手动指定当前歌曲歌词

设置分三档,新手只动前两档就够

面板里的齿轮图标打开设置弹窗(src/components/modal/SettingsModal.tsx),页签很多,但按使用频率分三档看就清楚了:

  • 建议改:通用页的语言与明暗风格,外观页的主题模式——花 1 分钟改完,界面观感就定了;
  • 可选:播放页的预加载、回放增益(ReplayGain,统一不同歌曲响度的技术)、音频输出设备——对声音敏感再动;
  • 进阶:集成页的 Navidrome 与 OBS 源连接,存储页的缓存清理和多设备同步,桌面端的防息屏、点击穿透。

新手卡在第 1 档做完就可以关掉弹窗了,剩下的以后按需回来补。

14 种全屏歌词动画:Folia 出圈的主角

前面都是铺垫,Folia 真正让人停下来不走的,是它的歌词动画。内建 14 种模式:流光、绘光、浮名、群唱、倾诉、镜台、时计、莫奈、心象、云阶、商籁、回环、凝彩、静止,每种都有独立可调参数,全部注册在 src/components/visualizer/registry.tsx。风格差异肉眼可见:浮名把歌词做成缓缓升腾的字雾;群唱则用聊天气泡加虚拟角色,把整首歌排成一场对话:

不想纠结配色,可以让 AI 根据歌曲情绪和歌词内容自动生成主题,背景、字色、视觉参数一次配齐。切换模式也不用退出播放,画面会平滑过渡,切歌时歌词衔接不会跳帧。

三个容易被忽略的细节

  • 本地歌词不止在线匹配:同目录同名的 .lrc、.vtt、.qrc、.krc 等 6 种格式会被自动识别,内嵌 LRC 的音频文件也能直接读。
  • 标题栏会自己隐身:播放时顶部标题栏自动隐藏,双击它还能最大化窗口,全屏看歌词更干净。
  • 同步服务端是可选的:多设备想同步外观设置和 AI 主题库,需要自己托管一个 sync-server,单机使用完全不依赖它。

从三步放歌到 14 种全屏歌词动画,Folia 的路径比想象中短——装好、点卡片、让歌词飞起来,剩下的慢慢玩 🎧

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻

目标分解:Agentic AI应用成功的关键保障

目标分解:Agentic AI应用成功的关键保障

团队里一个做Agentic AI项目的同事上周跟我抱怨,说他们那个智能体任务一复杂就“翻车”——要么中途跑偏,要么卡在一个子任务里出不来,要么把资源全浪费在无关紧要的环节上。我问他怎么给智能体下发任务的,他给我看了一段提示词&a…

2026/10/21 5:44:16 阅读更多 →
从模糊词根到可执行方案:rea 读取与响应式入口的工程实现

从模糊词根到可执行方案:rea 读取与响应式入口的工程实现

1. 从“rea”这个模糊词根说起:它到底指向什么第一次看到“rea”这个标题,我其实也愣了一下。没有正文、没有关键词、没有摘要,只有一个三字母的词根。这种极简输入在真实工作里并不少见——同事甩过来一个命名、一个缩写、一个半截单词&…

2026/10/21 5:44:16 阅读更多 →
影像与电子病历融合的多模态医疗AI诊断系统架构解析

影像与电子病历融合的多模态医疗AI诊断系统架构解析

做医疗AI这几年,我见过太多单模态模型栽在真实临床数据上的例子:CT影像模型在公开数据集上指标很好看,一上真实场景就被检验报告和既往病史“打回原形”;病历文本模型能读懂“咳嗽咳痰、发热三天”,但对CT上那个磨玻璃…

2026/10/21 5:44:16 阅读更多 →

最新新闻

分布式电源选址定容的多目标优化:从帕累托前沿到最优折中解

分布式电源选址定容的多目标优化:从帕累托前沿到最优折中解

在分布式能源(分布式光伏、小型风机、储能、燃气轮机等)接入配电网的项目里,说白了大家最关心的就两件事:在哪建、建多大。也就是选址和定容。这两个问题一旦定下来,直接决定了电网改造投资、运行损耗、电压质量和供电…

2026/10/21 6:25:34 阅读更多 →
轻量级C++ HTTP服务器:零依赖、裸机级控制与嵌入式适用

轻量级C++ HTTP服务器:零依赖、裸机级控制与嵌入式适用

简介:这是一份基于C20协程与epoll机制实现的轻量级异步HTTP服务器开源库,面向具备C基础并希望深入理解现代网络编程范式的中高级开发者,适用于构建高性能Web服务、微服务接口或嵌入式HTTP服务模块。资源包共50个文件,涵盖18个头文…

2026/10/21 6:25:34 阅读更多 →
AI质检转型:从人工判断到可复制的智能审核系统

AI质检转型:从人工判断到可复制的智能审核系统

生产型行业的质检转型,我在产线上见过太多次同一个画面:一排全检工位,几个熟手对着屏幕盯缺陷,眼睛花了就换班次继续盯;售后流回来的不良品里,总有一批当初是判定合格流出厂门的。问题的根源不在人不够敬业…

2026/10/21 6:25:34 阅读更多 →
轨迹预测代码包拆解:坐标系、序列模型与ADE/FDE评估

轨迹预测代码包拆解:坐标系、序列模型与ADE/FDE评估

简介:这是一份面向深度学习初学者的轨迹预测项目完整代码包,聚焦LSTM与GRU在序列数据上的建模与对比。压缩包共11个文件,约723KB,核心包含7个Python脚本、1个TensorFlow模型索引及数据分块、1个轨迹数据集,另附checkpo…

2026/10/21 6:25:34 阅读更多 →
企业级智能体从零构建指南:架构设计、业务落地与避坑实录

企业级智能体从零构建指南:架构设计、业务落地与避坑实录

企业级智能体这个词,这两年都快被说烂了。但你真去问那些中小团队,十个里有八个卡在同一个地方:看了一堆概念,装了各种框架,最后连一个能稳定跑在生产环境里的任务都搭不出来。问题不在于模型不够聪明,而在…

2026/10/21 6:25:34 阅读更多 →
企业微信H5授权登录全攻略:从OAuth流程到access_token缓存实战

企业微信H5授权登录全攻略:从OAuth流程到access_token缓存实战

1. 认清本质:企业微信H5授权到底在干嘛很多初接触企业微信H5开发的童鞋,一上来就盯着那些API文档和参数名死磕,结果把企业微信授权登录完全理解成了传统的账号密码登录。这玩意儿跟微信公众平台的网页授权是一脉相承的思路,但又多…

2026/10/21 6:24:34 阅读更多 →

日新闻

统一内存+量化:锐龙AI Max PRO 400如何本地跑320B大模型

统一内存+量化:锐龙AI Max PRO 400如何本地跑320B大模型

这段时间硬件圈和AI圈都在传一个事:AMD锐龙AI Max PRO 400系列把最高192GB统一内存搬进了PC形态的产品里,按宣传口径,本地跑320B参数的大家伙不再是纸面概念。我第一反应倒不是“内存真大”,而是这话背后的含金量——它把过去只能…

2026/10/21 0:00:11 阅读更多 →
AI助手深度使用体验:对话质量、长文本处理与指令遵循如何留住用户

AI助手深度使用体验:对话质量、长文本处理与指令遵循如何留住用户

1. 从“封号重开”这个行为说起:用户到底在追求什么“封号重开”这四个字,放在任何产品语境里都带着一股决绝的味道。一个账号从零开始积累使用记录、调教偏好、沉淀工作流,背后是大量的时间和精力成本。正常情况下,没有人愿意主动…

2026/10/21 0:00:11 阅读更多 →
ROS中YOLOv3工程落地:通信同步、坐标变换与性能调优

ROS中YOLOv3工程落地:通信同步、坐标变换与性能调优

1. 为什么在ROS里硬刚YOLOv3不是“炫技”,而是工程落地的必经之路我第一次在某高校机器人实验室看到那台搭载Jetson TX2的移动底盘原地打转、反复识别错垃圾桶时,就意识到:单纯跑通darknet_ros demo和真正让YOLOv3在ROS里“干活”&#xff0c…

2026/10/21 0:00:11 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型(GMM)的语音识别系统,很多人第一反应就是一堆数学公式,觉得门槛很高。但如果你真的在MATLAB里把它落地跑通,会发现核心其实就是三件事:把声音变成特征向量,用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理入门:反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人,但落到具体操作上,无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程:对图像做反白、改调色板、彩色转灰度,最后把像素数据导出成txt文件。单看每一…

2026/10/20 20:43:59 阅读更多 →
机器人大脑技术盘点:具身智能的感知、决策与数据闭环

机器人大脑技术盘点:具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词,你会发现一个很有意思的现象:每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型,有人指的是运动控制系统,还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/21 4:27:17 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

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

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

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

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

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

2026/10/20 9:50:45 阅读更多 →