企业官网建设流程全解析

Folia 播放器入门教程：四步播通第一首歌

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

Folia 是一款以全屏歌词动画为核心的音乐播放器，支持本地音乐库、Navidrome 以及网易云、QQ 音乐、酷狗等在线平台。这篇 Folia 播放器教程面向第一次接触本项目的读者：跟着读完，你就能完成安装启动、导入音乐、搜索播放和用快捷键切歌的完整流程，并把歌曲放进全屏歌词页。

先定音乐来源：本地曲库、Navidrome 还是在线平台

启动前你只需要做一个决定：歌从哪里来。

• 本地曲库：音乐文件在自己电脑上，走Folder页签，无需任何账号；
• Navidrome：自建的音乐服务器（Navidrome 是一个可自托管的音乐流媒体服务），走Navi页签，需要在设置里填服务器地址；
• 在线平台：网易云、QQ 音乐、酷狗，用搜索框直接搜，但部分歌曲未登录只能试听 30 秒。

对新手来说，本地曲库是最省心的起点：不依赖网络登录，打开就能听。本地导入的详细规则见 本地音乐库管理文档。

安装桌面版，或在本地把 Web 版跑起来

Folia 同时提供 Electron 桌面版和 Web 版（基于 React + Vite，源码入口 src/index.tsx）。两条获取路径任选其一：

1. 桌面版（推荐）：从 Releases 下载对应平台的安装包（Windows / macOS / Linux）并安装，前后端环境都已内置，即装即用。
2. 本地开发运行：先准备 Node.js 24 及以上版本，然后克隆仓库git clone https://gitcode.com/GitHub_Trending/fo/folia-major，在目录内执行npm install安装依赖，再执行npm run dev启动开发服务器，浏览器打开后就是完整的 Folia 界面。

启动后你会看到首页顶部的页签条：Playlists / Radio / Albums / Folder / Navi，它决定你接下来搜哪里、看哪里；右上角是搜索框，右下角的悬浮按钮用于展开在线平台的登录入口。

导入一个音乐文件夹，把第一首歌播出来

以本地曲库为例，最短的完整流程是五步：

1. 点击顶部Folder页签进入本地音乐区域；
2. 点击工具栏的Import Folder（导入文件夹），在系统目录选择器中选中你的音乐目录；
3. 等待扫描完成。Folia 会递归读取子目录中的音频、同目录歌词文件（.lrc等）与内嵌封面，目录较大时后台元数据读取需要一些时间；
4. 在海报墙中点进All Songs（或任意文件夹卡片），单击任意歌曲即可开始播放；
5. 进入全屏歌词页后按一次H隐藏控制条，歌词动画会铺满整个屏幕——这正是 Folia 的招牌体验。

如果你走在线平台，流程更短：保持顶部页签在在线来源，在右上角搜索框输入歌名或歌手名（占位提示会显示「搜索在线歌曲...」），在结果列表单击歌曲即可播放。搜到想留存的歌曲后，在歌曲菜单里选「收藏」，成功会提示「已添加到喜欢的音乐」。

用快捷键完成日常播放操作

进入播放状态后，高频操作都可以不碰鼠标完成。快捷键完整定义见 src/components/modal/userGuideContent.ts：

💡 命令面板（按S打开）值得单独记住：输入「切歌」「搜索」「收藏」等汉字或拼音即可触发动作，比在菜单里逐层找更快。

新手最容易踩的三个坑

1. 在线歌曲只放了 30 秒就停。原因是未登录时在线平台仅开放试听。点右下角悬浮按钮展开平台入口，扫码登录后即可完整播放，还能访问你的在线歌单与收藏。
2. 重启电脑后本地曲库变灰或歌曲播不了。浏览器和系统可能在重启后收回目录读取权限，界面出现「需要恢复本地音乐访问权限」时，按提示重新授权即可；目录被移动或改名则重新导入对应文件夹。
3. Web 版提示不支持文件夹导入。Web 版的文件夹导入依赖浏览器的 File System Access API，不支持时请换浏览器或直接用桌面版。详见 本地音乐库管理。

🎧 另外注意：本地目录里混有临时音频时，可以在根目录放一个.foliaignore文件排除它们，规则语法与.gitignore相同，重新导入后生效。

下一步：从能听到好听

跑通「导入 → 播放 → 切歌 → 收藏」后，建议再花几分钟体验两件事：切换不同的全屏歌词动画主题（浮名、流光、群唱等，预览见 README 主题展示区），以及让 Folia 为本地歌曲自动匹配在线歌词与封面。部署、环境变量与 Stage API 等进阶内容，参考 docs/technical.md。

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