Topics

#ambient #bilibili #lofi-radio #music #nextjs16 #productivity #pwa #react #sleep-timer #typescript

Language breakdown

TypeScript 96.2%

CSS 3.2%

JavaScript 0.5%

Dockerfile 0.2%

▸ Files click to expand

README

🎵 Lofi Radio Web

Lofi（Low Fidelity）低保真音乐，是工作与学习等专注场景下公认的高适配背景音，被科学家认为是最适合专注工作学习的音乐。

macOS 风格灵动岛设计，21 个精选电台，打开即用，无需下载

🎧 在线体验 · 📖 功能特性 · 🚀 快速开始 · 📦 部署指南 · 💬 Discussions

🖼️ 首页预览

亮色模式

暗色模式

📖 项目简介

Lofi Radio Web 是 labilio/lofi-radio 的网页版实现，将原 Electron 桌面应用改造为现代化 Web 应用。

就像把咖啡店的背景音乐搬进你的书房 —— 不需要本地音源，不需要选歌单，打开网页即可收听。

🎯 设计理念

专注体验 - 灵动岛设计，小巧玲珑，安静陪伴不打扰
跨平台 - 基于 Web 技术，支持桌面、移动端全平台访问
即开即用 - 无需注册登录，无需下载安装，打开即用
PWA 支持 - 可安装到桌面，像原生应用一样使用

🧠 为什么 Lofi 适合专注场景

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 分钟自定义时长
定时结束后自动暂停播放
睡眠定时状态支持本地持久化

📻 电台列表（共 21 个）

学习（3）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Lofi Girl | Lofi / Chill | B站直播源，国内访问友好 | | Lofi Box | Lofi / Chill | 经典 Lofi 流 | | Lofi Studying | Lofi / Study | 学习向场景电台 |

编程（2）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Groove Salad | Chill / Ambient | 长时间编码友好 | | Code Radio | Lofi / Coding | freeCodeCamp 编程电台 |

阅读（4）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Chill Sky | Chill / Electro | 轻电子氛围 | | Lofi Japanese | Japanese / Lofi | 日系 Lofi 氛围 | | Jazz Box | Jazz / Smooth | 柔和爵士流 | | B3cks Radio | Lofi / Relax | 放松导向 Lofi |

放松（3）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Chill Wave | Chill / Electro | 氛围电子 | | Lofi Chilling | Lofi / Chill | 低压陪伴型背景音 | | Paradise | Chill / Alt | 多元轻松风格 |

助眠（4）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Rain Sounds | Ambient / Nature | 白噪音与自然声 | | Lofi Sleeping | Lofi / Sleep | 睡前低刺激流 | | Drone Zone | Ambient / Deep | 深层氛围音墙 | | ASP | Ambient / Sleep | 极简助眠氛围 |

专注（1）

| 电台 | 风格标签 | 说明 | |------|---------|------| | Swiss Classic | Classical / Symphony | 古典交响专注场景 |

其他（4）

| 电台 | 风格标签 | 场景 | |------|---------|------| | 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 账号下。

>

1. 访问 lofi-radio-web 仓库主页

2. 点击右上角的 Fork 按钮

3. 等待 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 是当前最推荐的部署方式，也是和本仓库结构最匹配的托管平台。

点击上方按钮，或访问 Vercel Dashboard
导入你 Fork 的 lofi-radio-web 仓库
保持默认 Framework Preset 为 Next.js
Build Command 使用默认值，或显式填写 npm run build
安装命令保持默认值，或显式填写 npm install
Node.js 版本设置为 20.x 或更高
当前默认公开功能通常不需要额外环境变量，直接点击 Deploy 即可

如果后续你在自己的分支中启用了数据库、鉴权或其他扩展能力，再按你的改动补充对应环境变量。

部署到标准 Node.js 服务器（推荐）

如果你使用自己的 Linux 服务器、云主机、PaaS 或面板，推荐按标准 Next.js Node 服务方式部署。

# 安装依赖
npm install
构建
npm run build
启动生产服务
npm run start

默认监听端口为 3000。如果你需要反向代理，可以直接把 Nginx / Caddy 指向这个端口。

仓库中已包含一个可参考的 Caddyfile，适合本地或自托管场景做反向代理。

Docker 部署（推荐）

仓库根目录现已提供可直接使用的 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 端口。

Cloudflare Pages / Netlify / 其他平台

这类平台不是当前仓库的主推荐部署路径。原因不是“不能部署”，而是：

本项目包含服务端 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