Lofi（Low Fidelity）低保真音乐，是工作与学习等专注场景下公认的高适配背景音，被科学家认为是最适合专注工作学习的音乐。
macOS 风格灵动岛设计，21 个精选电台，打开即用，无需下载
🎧 在线体验 · 📖 功能特性 · 🚀 快速开始 · 📦 部署指南 · 💬 Discussions
Lofi Radio Web 是 labilio/lofi-radio 的网页版实现，将原 Electron 桌面应用改造为现代化 Web 应用。
就像把咖啡店的背景音乐搬进你的书房 —— 不需要本地音源，不需要选歌单，打开网页即可收听。
- 专注体验 - 灵动岛设计，小巧玲珑，安静陪伴不打扰
- 跨平台 - 基于 Web 技术，支持桌面、移动端全平台访问
- 即开即用 - 无需注册登录，无需下载安装，打开即用
- PWA 支持 - 可安装到桌面，像原生应用一样使用
Lofi（Low Fidelity）低保真音乐常用于学习、编程、写作与办公等高专注任务。其典型特征包括：
- 节奏慢且稳定（通常 60-90 BPM）
- 旋律简单、循环感强
- 极少或没有歌词
- 音色柔和，常带雨声、黑胶噼啪声、环境底噪
- 情绪克制，不刻意制造高潮
它之所以被广泛用于背景专注，核心原因是：
- 不与语言脑区竞争注意力：带歌词音乐容易占用语言处理资源，Lofi 的弱语义特征更适合长时间专注任务。
- 规律可预测，帮助进入状态：稳定节奏与循环结构带来心理上的可预测性，更容易进入 Deep Work / Flow。
- 提供陪伴感，降低焦虑：温和的情绪表达在不打断思路的前提下，缓解工作与考试带来的紧张感。
| 功能 | 描述 |
|---|---|
| 21 精选电台 | 涵盖 Lofi、Chillhop、Jazz、Classical、Hip-Hop、Ambient 等多种风格 |
| Bilibili 直播源 | 支持 Lofi Girl B站直播流，支持 FLV/HLS 自动兜底 |
| 全球流媒体来源 | 集成 Lofi Cafe、SomaFM、Code Radio、Swiss Classic 等多来源 |
| 智能切换 | 一键切换电台，自动播放无缝衔接 |
| 功能 | 描述 |
|---|---|
| 灵动岛播放器 | macOS 风格灵动岛设计，可自由拖动到屏幕任意位置 |
| 玻璃拟态效果 | 高斯模糊 + 透明度，精致美观 |
| 黑胶唱片动画 | 精美的黑胶唱片旋转动画，播放时自动旋转 |
| 暗色/亮色主题 | 支持一键切换，自动跟随系统主题 |
| 响应式设计 | 完美适配桌面端和移动端 |
| 快捷键 | 功能 |
|---|---|
Space |
播放 / 暂停 |
← |
上一首 |
→ |
下一首 |
M |
静音 / 取消静音 |
T |
切换主题（暗色/亮色） |
- 记录每日专注时长（仅在播放时计时）
- 帮助培养高效工作习惯
- 数据本地存储，每日自动重置
- 支持 15/30/45/60/90/120 分钟快速设置
- 支持 1~480 分钟自定义时长
- 定时结束后自动暂停播放
- 睡眠定时状态支持本地持久化
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Lofi Girl | Lofi / Chill | B站直播源，国内访问友好 |
| Lofi Box | Lofi / Chill | 经典 Lofi 流 |
| Lofi Studying | Lofi / Study | 学习向场景电台 |
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Groove Salad | Chill / Ambient | 长时间编码友好 |
| Code Radio | Lofi / Coding | freeCodeCamp 编程电台 |
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Chill Sky | Chill / Electro | 轻电子氛围 |
| Lofi Japanese | Japanese / Lofi | 日系 Lofi 氛围 |
| Jazz Box | Jazz / Smooth | 柔和爵士流 |
| B3cks Radio | Lofi / Relax | 放松导向 Lofi |
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Chill Wave | Chill / Electro | 氛围电子 |
| Lofi Chilling | Lofi / Chill | 低压陪伴型背景音 |
| Paradise | Chill / Alt | 多元轻松风格 |
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Rain Sounds | Ambient / Nature | 白噪音与自然声 |
| Lofi Sleeping | Lofi / Sleep | 睡前低刺激流 |
| Drone Zone | Ambient / Deep | 深层氛围音墙 |
| ASP | Ambient / Sleep | 极简助眠氛围 |
| 电台 | 风格标签 | 说明 |
|---|---|---|
| Swiss Classic | Classical / Symphony | 古典交响专注场景 |
| 电台 | 风格标签 | 场景 |
|---|---|---|
| Jazz Groove | Jazz / Groove | 写作 |
| Jazz Smooth | Jazz / Mellow | 办公 |
| Rap Beats | Hip-Hop / Beats | 运动 |
| Lofi Gaming | Lofi / Gaming | 娱乐 |
| 技术 | 描述 |
|---|---|
| Next.js 16 | React 全栈框架，App Router |
| React 19 | 用户界面库 |
| TypeScript | 类型安全 |
| Tailwind CSS v4 | 原子化 CSS |
| Framer Motion | 动画库 |
| Zustand | 轻量级状态管理 |
| HLS.js | HLS 流媒体播放 |
| flv.js | B站 FLV 直播流播放 |
| Lucide Icons | 图标库 |
- Node.js 20.9 或更高版本（Next.js 16 要求）
- npm、yarn、pnpm 或 bun
# 克隆仓库
git clone https://github.com/88lin/lofi-radio-web.git
cd lofi-radio-web
# 安装依赖
npm install
# 启动开发服务器
npm run dev打开浏览器访问 http://localhost:3000
# 构建
npm run build
# 启动生产服务器
npm run start📌 首先，Fork 本仓库到你自己的 GitHub 账号下。
- 访问 lofi-radio-web 仓库主页
- 点击右上角的 Fork 按钮
- 等待 Fork 完成，你将在自己的 GitHub 账号下看到
lofi-radio-web仓库的副本以下所有部署方式都将基于你 Fork 的仓库进行操作。
当前仓库的已验证部署前提如下：
- 运行时要求：Node.js
>= 20.9.0 - 应用类型：标准 Next.js 服务端应用，不是纯静态站点
- API 依赖：
/api/bilibili-stream显式使用 Node.js runtime - 外网访问：部署环境需要允许服务端访问
api.live.bilibili.com和api.github.com
这意味着部署平台至少要满足两件事：
- 支持 Next.js 的服务端运行模式
- 支持 Node.js 20+ 的服务端出网请求
如果平台只适合纯静态导出，或者对 Node.js runtime / 服务端出网支持有限，就不适合作为本项目的默认部署路径。
Vercel 是当前最推荐的部署方式，也是和本仓库结构最匹配的托管平台。
- 点击上方按钮，或访问 Vercel Dashboard
- 导入你 Fork 的
lofi-radio-web仓库 - 保持默认 Framework Preset 为
Next.js - Build Command 使用默认值，或显式填写
npm run build - 安装命令保持默认值，或显式填写
npm install - Node.js 版本设置为
20.x或更高 - 当前默认公开功能通常不需要额外环境变量，直接点击
Deploy即可
如果后续你在自己的分支中启用了数据库、鉴权或其他扩展能力，再按你的改动补充对应环境变量。
如果你使用自己的 Linux 服务器、云主机、PaaS 或面板，推荐按标准 Next.js Node 服务方式部署。
# 安装依赖
npm install
# 构建
npm run build
# 启动生产服务
npm run start默认监听端口为 3000。如果你需要反向代理，可以直接把 Nginx / Caddy 指向这个端口。
仓库中已包含一个可参考的 Caddyfile，适合本地或自托管场景做反向代理。
仓库根目录现已提供可直接使用的 Dockerfile。
# 构建镜像
docker build -t lofi-radio-web .
# 运行容器
docker run -d --name lofi-radio-web -p 3000:3000 --restart unless-stopped lofi-radio-web容器启动后，应用会在容器内执行 npm run start，默认对外提供 3000 端口。
这类平台不是当前仓库的主推荐部署路径。原因不是“不能部署”，而是：
- 本项目包含服务端 API，而不是纯静态页面
/api/bilibili-stream依赖 Node.js runtime 和服务端出网请求- 不同平台对 Next.js server runtime、适配器、Node.js 版本和网络策略的支持差异较大
如果你非常熟悉这些平台，可以自行验证适配方案；否则更建议优先使用：
- Vercel
- 标准 Node.js 服务器
- Docker + 反向代理
其中，原先 README 中把某些平台写成固定构建配置的做法并不准确，因此这里不再给出未经仓库验证的模板化参数。
lofi-radio-web/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── page.tsx # 首页
│ │ ├── layout.tsx # 根布局
│ │ ├── globals.css # 全局样式
│ │ ├── robots.ts # robots.txt 路由
│ │ ├── sitemap.ts # sitemap.xml 路由
│ │ └── api/ # API 路由
│ │ ├── bilibili-stream/ # B站直播流解析
│ │ └── stations/ # 电台同步 API
│ ├── components/ # 组件
│ │ ├── lofi/ # Lofi 相关组件
│ │ │ └── floating-player.tsx # 浮动播放器
│ │ ├── ui/ # UI 基础组件
│ │ └── theme-provider.tsx # 主题提供者
│ ├── hooks/ # 自定义 Hooks
│ │ ├── useAudioPlayer.ts # 音频播放逻辑
│ │ ├── useFocusTimer.ts # 专注计时
│ │ ├── useSleepTimer.ts # 睡眠定时
│ │ └── use-toast.ts # Toast 提示
│ ├── lib/ # 工具库
│ │ ├── stations.ts # 电台配置
│ │ ├── seo.ts # SEO 配置与 metadata/schema 构建
│ │ ├── seo-content.ts # FAQ 等 SEO 文案内容
│ │ └── utils.ts # 工具函数
│ └── store/ # 状态管理
│ └── audioStore.ts # 音频状态
├── public/ # 静态资源
│ ├── logo.svg # Logo
│ └── manifest.json # PWA 配置
├── scripts/ # 构建辅助脚本
│ └── submit-indexnow.ts # 手动提交 IndexNow
├── package.json
├── Dockerfile
├── tailwind.config.ts
├── next.config.ts
└── LICENSE
本项目电台资源采用「基础源 + 人工精选扩展」策略：
- 基础参考来源： labilio/lofi-radio
- 扩展来源：Lofi Cafe、SomaFM、Code Radio 及其他公开流媒体电台
更新方式：
- 评估新电台源的可用性与稳定性
- 更新
src/lib/stations.ts中的stations数组 - 同步更新 README 的电台列表与总数
- 提交更改
src/lib/seo.ts：集中管理 metadata、Open Graph、Twitter、Schema、robots 和 sitemap 配置src/lib/seo-content.ts：管理首页 FAQ 等 SEO 可见文案内容src/app/robots.ts：生成/robots.txtsrc/app/sitemap.ts：生成/sitemap.xml
为了让反馈更快进入可处理状态，请按内容选择入口：
- 💬 Discussions： 使用问题、开放讨论、思路交流、暂不确定是否属于缺陷的问题
- 🐛 Bug 反馈： 可复现的功能异常、回归问题、播放器或 API 故障
- 🚀 功能建议： 新特性、交互优化、维护体验改进
- 🛠️ 部署 / 环境问题： 安装、构建、部署、环境变量与平台兼容问题
- 📻 电台源补充 / 内容维护： 新增电台、修复失效源、更新 README / 文案
仓库已启用结构化 Issue 模板、PR 模板和自动维护流程。提报越完整，越容易被快速处理。
欢迎所有形式的贡献，但请尽量保持改动聚焦、上下文完整。
- Fork 本仓库
- 创建分支，例如
fix/player-bug或feat/new-station-source - 完成修改并本地自检
- 推送分支并创建 Pull Request
提交 PR 前，建议先阅读 CONTRIBUTING.md，其中包含：
- Issue / PR 的推荐提交流程
- 本地开发与最少验证命令
- 电台源与内容维护的注意事项
- 对陌生贡献者更友好的协作约定
本项目采用 MIT License 开源协议。
- ✅ 你可以自由地使用、复制、修改和分发本项目。
- 📝 请在衍生作品中保留原作者的版权声明。
- labilio/lofi-radio - 提供了丰富的电台资源和创作灵感
- Lofi Girl - 提供优质的 Lofi 音乐直播
- 所有电台提供商
如有问题或建议，欢迎：
- 💬 Discussions - 参与讨论与使用交流
- 🐛 提交 Issue - 按模板反馈问题或建议
- 🤝 CONTRIBUTING - 查看协作规范与提交流程
- 📝 博客 - 茉灵智库