企业官网建设流程全解析

Folia 音乐播放器上手：本地导入、在线播放与全屏歌词动画 5 个动作

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

Folia 是一个把歌词做成全屏动画的音乐播放器：本地音乐库、Navidrome 自建服务器、网易云 / QQ 音乐 / 酷狗在线播放都能接。读完这篇，你会按手势顺序走一遍界面：接上音乐源、逛卡片主界面、管好播放面板、改几项新手设置，最后切到你喜欢的歌词动画。

音乐源怎么接入：本地、在线平台与自建服务器

三类音乐源，三条入口。

本地曲库：在首页本地区域选“导入文件夹”，Folia 会递归扫描目录，从文件里读取标题、艺术家、ReplayGain、内嵌歌词和封面。MP3、FLAC、M4A、WAV、OGG 都支持；同目录放一个同名的.lrc文件会自动挂上。扫描、重扫、实体编辑的完整规则见 docs/local-library-management.md。

在线平台：点首页的网易云 / QQ 音乐 / 酷狗卡片进入搜索页，在面板里扫码登录即可搜歌播放。

Navidrome：在设置里填好服务器地址与账号，就能像在线平台一样浏览播放。

类比一下，它就像你手机里的存储：既能放自己的文件，也能挂云账号。三种源接入后，卡片主界面长得一样，切换无成本。

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

卡片网格主界面怎么逛

主界面是一张悬浮的 3D 卡片网格（Grid3D），每张卡片都是一个入口：歌单、专辑、文件夹、歌手，点进去就是下一层，逐级可返回。导航历史由useAppNavigation这个 hook 维护，整个外壳由 src/components/app/Home.tsx 和AppShell.tsx组装。

顶部一排是维度切换（Playlists / Radio / Albums / Folder），右上角是搜索框。标题栏可以拖拽移动窗口，播放时会自动淡出，画面更沉浸。

主界面就像手机桌面：卡片就是 App 图标，想要的入口点一下就进。

接上 Navidrome 后，网格和在线平台完全同构，只是数据来源变了：

播放控制与队列在哪里管

右下角的统一面板（src/components/UnifiedPanel.tsx）是你高频操作的集中地，顶部一排页签，每个页签都是 src/components/panelTab/ 下的独立组件，常用的有：

• 封面：点封面跳转专辑或歌手详情；
• 控制：音量、进度、播放模式（列表循环 / 单曲循环）、收藏，ReplayGain 也在这里调；
• 队列：拖拽排序、移除歌曲；
• 账号：扫码登录与切换网易云 / QQ / 酷狗；
• 本地：本地 / 内嵌 / 在线三种歌词来源切换，在线歌词匹配；
• 在线歌词：手动换歌词提供方、调时间轴偏移。

面板像手机底部的 Dock：高频操作抬手就够到，不用离开当前页面。

💡 提示：页签支持键盘快捷键直接切换，切歌间隙不用挪鼠标。

新手设置先看哪几项

点左上角的齿轮图标打开设置弹窗，内部按子视图分组，每个子视图都是 src/components/modal/settings/ 下的独立文件。按优先级排：

• 通用：语言、界面明暗，改完就走；
• 外观：主题模式、自定义主题、主题乐园；
• 播放：预加载、ReplayGain、音频输出设备；
• 桌面端：窗口圆角、透明度、点击穿透、防息屏；
• 集成：Navidrome、OBS、歌词 API 连接；
• 存储：缓存清理、多设备同步；
• 实验：未稳定的新特性，先别碰。

像游戏设置页，不必全摸一遍。新手只动通用和外观这两项，观感就能到位。

全屏歌词动画怎么切换

这是 Folia 的招牌：14 种内建歌词动画模式统一注册在 src/components/visualizer/registry.tsx，默认是classic，每种模式带独立参数面板（相机速度、辉光、字号都能调）。模式切换就像给同一首歌换镜头语言——同一句词，浮名（Fume）是油墨层次铺满画面、镜头追着正在唱的那一行漂移，群唱（Cappella）则是一群角色用对话气泡轮流开唱。

主界面找歌、面板管播放、设置调样子、全屏放动画——记住这一句就够 🎧

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