{"id":50125532,"url":"https://github.com/88lin/lofi-radio-web","last_synced_at":"2026-06-09T11:00:55.946Z","repository":{"id":347810267,"uuid":"1195364422","full_name":"88lin/lofi-radio-web","owner":"88lin","description":"一个为专注场景而做的 Lofi Radio 网页版。Lofi音乐因节奏平稳、旋律循环、干扰较少，长期被公认为学习和工作场景中更适合作为背景音的音乐类型之一。项目采用 macOS 风格灵动岛设计，收录 21 个精选电台，打开网页即可收听。基于 LoFi Girl 等优质内容主要分布在海外平台、国内触达不够方便的现实，希望把适合学习、工作与放松的专注音乐带到更容易触达的地方。（A macOS-inspired web version of Lofi Radio with 21 curated stations, designed to make focus-friendly music easier to access.）","archived":false,"fork":false,"pushed_at":"2026-04-23T07:18:47.000Z","size":2054,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-23T07:25:35.845Z","etag":null,"topics":["ambient","bilibili","lofi-radio","music","nextjs16","productivity","pwa","react","sleep-timer","typescript"],"latest_commit_sha":null,"homepage":"https://lofi.88lin.eu.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/88lin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-29T15:29:01.000Z","updated_at":"2026-04-23T07:18:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/88lin/lofi-radio-web","commit_stats":null,"previous_names":["88lin/lofi-radio-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/88lin/lofi-radio-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/88lin%2Flofi-radio-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/88lin%2Flofi-radio-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/88lin%2Flofi-radio-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/88lin%2Flofi-radio-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/88lin","download_url":"https://codeload.github.com/88lin/lofi-radio-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/88lin%2Flofi-radio-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34103357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ambient","bilibili","lofi-radio","music","nextjs16","productivity","pwa","react","sleep-timer","typescript"],"created_at":"2026-05-23T20:00:20.650Z","updated_at":"2026-06-09T11:00:55.940Z","avatar_url":"https://github.com/88lin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🎵 Lofi Radio Web\n\n\u003cdiv align=\"center\"\u003e\n\n![Lofi Radio](https://img.shields.io/badge/Lofi-Radio-8B5CF6?style=for-the-badge\u0026logo=music\u0026logoColor=white)\n![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge\u0026logo=next.js)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge\u0026logo=typescript)\n![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)\n\n**Lofi（Low Fidelity）低保真音乐，是工作与学习等专注场景下公认的高适配背景音，被科学家认为是最适合专注工作学习的音乐。**\n\nmacOS 风格灵动岛设计，21 个精选电台，打开即用，无需下载\n\n**[🎧 在线体验](https://lofi.88lin.eu.org/)** · [📖 功能特性](#-功能特性) · [🚀 快速开始](#-快速开始) · [📦 部署指南](#-部署指南) · [💬 Discussions](https://github.com/88lin/lofi-radio-web/discussions)\n\n\u003c/div\u003e\n\n---\n\n## 🖼️ 首页预览\n\n\u003cdiv align=\"center\"\u003e\n\n### 亮色模式\n![Lofi Radio Hero Light](https://cdn.jsdelivr.net/gh/88lin/picx-images-hosting@master/hero-image.jpg)\n\n### 暗色模式\n![Lofi Radio Hero Dark](https://cdn.jsdelivr.net/gh/88lin/picx-images-hosting@master/hero-image-dark.jpg)\n\n\u003c/div\u003e\n\n---\n\n## 📖 项目简介\n\nLofi Radio Web 是 [labilio/lofi-radio](https://github.com/labilio/lofi-radio) 的网页版实现，将原 Electron 桌面应用改造为现代化 Web 应用。\n\n**就像把咖啡店的背景音乐搬进你的书房** —— 不需要本地音源，不需要选歌单，打开网页即可收听。\n\n### 🎯 设计理念\n\n- **专注体验** - 灵动岛设计，小巧玲珑，安静陪伴不打扰\n- **跨平台** - 基于 Web 技术，支持桌面、移动端全平台访问\n- **即开即用** - 无需注册登录，无需下载安装，打开即用\n- **PWA 支持** - 可安装到桌面，像原生应用一样使用\n\n### 🧠 为什么 Lofi 适合专注场景\n\nLofi（Low Fidelity）低保真音乐常用于学习、编程、写作与办公等高专注任务。其典型特征包括：\n\n- **节奏慢且稳定**（通常 60-90 BPM）\n- **旋律简单、循环感强**\n- **极少或没有歌词**\n- **音色柔和**，常带雨声、黑胶噼啪声、环境底噪\n- **情绪克制**，不刻意制造高潮\n\n它之所以被广泛用于背景专注，核心原因是：\n\n1. **不与语言脑区竞争注意力**：带歌词音乐容易占用语言处理资源，Lofi 的弱语义特征更适合长时间专注任务。\n2. **规律可预测，帮助进入状态**：稳定节奏与循环结构带来心理上的可预测性，更容易进入 Deep Work / Flow。\n3. **提供陪伴感，降低焦虑**：温和的情绪表达在不打断思路的前提下，缓解工作与考试带来的紧张感。\n\n---\n\n## ✨ 功能特性\n\n### 🎵 音乐播放\n\n| 功能 | 描述 |\n|------|------|\n| **21 精选电台** | 涵盖 Lofi、Chillhop、Jazz、Classical、Hip-Hop、Ambient 等多种风格 |\n| **Bilibili 直播源** | 支持 Lofi Girl B站直播流，支持 FLV/HLS 自动兜底 |\n| **全球流媒体来源** | 集成 Lofi Cafe、SomaFM、Code Radio、Swiss Classic 等多来源 |\n| **智能切换** | 一键切换电台，自动播放无缝衔接 |\n\n### 🎨 界面设计\n\n| 功能 | 描述 |\n|------|------|\n| **灵动岛播放器** | macOS 风格灵动岛设计，可自由拖动到屏幕任意位置 |\n| **玻璃拟态效果** | 高斯模糊 + 透明度，精致美观 |\n| **黑胶唱片动画** | 精美的黑胶唱片旋转动画，播放时自动旋转 |\n| **暗色/亮色主题** | 支持一键切换，自动跟随系统主题 |\n| **响应式设计** | 完美适配桌面端和移动端 |\n\n### ⌨️ 快捷键支持\n\n| 快捷键 | 功能 |\n|--------|------|\n| `Space` | 播放 / 暂停 |\n| `←` | 上一首 |\n| `→` | 下一首 |\n| `M` | 静音 / 取消静音 |\n| `T` | 切换主题（暗色/亮色） |\n\n### 📊 专注计时\n\n- 记录每日专注时长（仅在播放时计时）\n- 帮助培养高效工作习惯\n- 数据本地存储，每日自动重置\n\n### 🌙 睡眠定时\n\n- 支持 15/30/45/60/90/120 分钟快速设置\n- 支持 1~480 分钟自定义时长\n- 定时结束后自动暂停播放\n- 睡眠定时状态支持本地持久化\n\n---\n\n## 📻 电台列表（共 21 个）\n\n### 学习（3）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Lofi Girl** | Lofi / Chill | B站直播源，国内访问友好 |\n| **Lofi Box** | Lofi / Chill | 经典 Lofi 流 |\n| **Lofi Studying** | Lofi / Study | 学习向场景电台 |\n\n### 编程（2）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Groove Salad** | Chill / Ambient | 长时间编码友好 |\n| **Code Radio** | Lofi / Coding | freeCodeCamp 编程电台 |\n\n### 阅读（4）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Chill Sky** | Chill / Electro | 轻电子氛围 |\n| **Lofi Japanese** | Japanese / Lofi | 日系 Lofi 氛围 |\n| **Jazz Box** | Jazz / Smooth | 柔和爵士流 |\n| **B3cks Radio** | Lofi / Relax | 放松导向 Lofi |\n\n### 放松（3）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Chill Wave** | Chill / Electro | 氛围电子 |\n| **Lofi Chilling** | Lofi / Chill | 低压陪伴型背景音 |\n| **Paradise** | Chill / Alt | 多元轻松风格 |\n\n### 助眠（4）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Rain Sounds** | Ambient / Nature | 白噪音与自然声 |\n| **Lofi Sleeping** | Lofi / Sleep | 睡前低刺激流 |\n| **Drone Zone** | Ambient / Deep | 深层氛围音墙 |\n| **ASP** | Ambient / Sleep | 极简助眠氛围 |\n\n### 专注（1）\n\n| 电台 | 风格标签 | 说明 |\n|------|---------|------|\n| **Swiss Classic** | Classical / Symphony | 古典交响专注场景 |\n\n### 其他（4）\n\n| 电台 | 风格标签 | 场景 |\n|------|---------|------|\n| **Jazz Groove** | Jazz / Groove | 写作 |\n| **Jazz Smooth** | Jazz / Mellow | 办公 |\n| **Rap Beats** | Hip-Hop / Beats | 运动 |\n| **Lofi Gaming** | Lofi / Gaming | 娱乐 |\n\n---\n\n## 🛠️ 技术栈\n\n| 技术 | 描述 |\n|------|------|\n| [Next.js 16](https://nextjs.org/) | React 全栈框架，App Router |\n| [React 19](https://react.dev/) | 用户界面库 |\n| [TypeScript](https://www.typescriptlang.org/) | 类型安全 |\n| [Tailwind CSS v4](https://tailwindcss.com/) | 原子化 CSS |\n| [Framer Motion](https://www.framer.com/motion/) | 动画库 |\n| [Zustand](https://zustand-demo.pmnd.rs/) | 轻量级状态管理 |\n| [HLS.js](https://hlsjs.org/) | HLS 流媒体播放 |\n| [flv.js](https://github.com/bilibili/flv.js) | B站 FLV 直播流播放 |\n| [Lucide Icons](https://lucide.dev/) | 图标库 |\n\n---\n\n## 🚀 快速开始\n\n### 环境要求\n\n- Node.js 20.9 或更高版本（Next.js 16 要求）\n- npm、yarn、pnpm 或 bun\n\n### 本地开发\n\n```bash\n# 克隆仓库\ngit clone https://github.com/88lin/lofi-radio-web.git\ncd lofi-radio-web\n\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm run dev\n```\n\n打开浏览器访问 http://localhost:3000\n\n### 构建生产版本\n\n```bash\n# 构建\nnpm run build\n\n# 启动生产服务器\nnpm run start\n```\n\n---\n\n## 📦 部署指南\n\n\u003e 📌 **首先，Fork 本仓库到你自己的 GitHub 账号下。**\n\u003e\n\u003e 1. 访问 [lofi-radio-web](https://github.com/88lin/lofi-radio-web) 仓库主页\n\u003e 2. 点击右上角的 **Fork** 按钮\n\u003e 3. 等待 Fork 完成，你将在自己的 GitHub 账号下看到 `lofi-radio-web` 仓库的副本\n\u003e\n\u003e 以下所有部署方式都将基于你 Fork 的仓库进行操作。\n\n### 部署前先确认\n\n当前仓库的已验证部署前提如下：\n\n- 运行时要求：Node.js `\u003e= 20.9.0`\n- 应用类型：标准 Next.js 服务端应用，不是纯静态站点\n- API 依赖：`/api/bilibili-stream` 显式使用 Node.js runtime\n- 外网访问：部署环境需要允许服务端访问 `api.live.bilibili.com` 和 `api.github.com`\n\n这意味着部署平台至少要满足两件事：\n\n1. 支持 Next.js 的服务端运行模式\n2. 支持 Node.js 20+ 的服务端出网请求\n\n如果平台只适合纯静态导出，或者对 Node.js runtime / 服务端出网支持有限，就不适合作为本项目的默认部署路径。\n\n### 部署到 Vercel（推荐）\n\n[Vercel](https://vercel.com) 是当前最推荐的部署方式，也是和本仓库结构最匹配的托管平台。\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/88lin/lofi-radio-web)\n\n1. 点击上方按钮，或访问 [Vercel Dashboard](https://vercel.com/dashboard)\n2. 导入你 Fork 的 `lofi-radio-web` 仓库\n3. 保持默认 Framework Preset 为 `Next.js`\n4. Build Command 使用默认值，或显式填写 `npm run build`\n5. 安装命令保持默认值，或显式填写 `npm install`\n6. Node.js 版本设置为 `20.x` 或更高\n7. 当前默认公开功能通常不需要额外环境变量，直接点击 `Deploy` 即可\n\n如果后续你在自己的分支中启用了数据库、鉴权或其他扩展能力，再按你的改动补充对应环境变量。\n\n### 部署到标准 Node.js 服务器（推荐）\n\n如果你使用自己的 Linux 服务器、云主机、PaaS 或面板，推荐按标准 Next.js Node 服务方式部署。\n\n```bash\n# 安装依赖\nnpm install\n\n# 构建\nnpm run build\n\n# 启动生产服务\nnpm run start\n```\n\n默认监听端口为 `3000`。如果你需要反向代理，可以直接把 Nginx / Caddy 指向这个端口。\n\n仓库中已包含一个可参考的 [Caddyfile](./Caddyfile)，适合本地或自托管场景做反向代理。\n\n### Docker 部署（推荐）\n\n仓库根目录现已提供可直接使用的 [Dockerfile](./Dockerfile)。\n\n```bash\n# 构建镜像\ndocker build -t lofi-radio-web .\n\n# 运行容器\ndocker run -d --name lofi-radio-web -p 3000:3000 --restart unless-stopped lofi-radio-web\n```\n\n容器启动后，应用会在容器内执行 `npm run start`，默认对外提供 `3000` 端口。\n\n### Cloudflare Pages / Netlify / 其他平台\n\n这类平台不是当前仓库的主推荐部署路径。原因不是“不能部署”，而是：\n\n- 本项目包含服务端 API，而不是纯静态页面\n- `/api/bilibili-stream` 依赖 Node.js runtime 和服务端出网请求\n- 不同平台对 Next.js server runtime、适配器、Node.js 版本和网络策略的支持差异较大\n\n如果你非常熟悉这些平台，可以自行验证适配方案；否则更建议优先使用：\n\n- Vercel\n- 标准 Node.js 服务器\n- Docker + 反向代理\n\n其中，原先 README 中把某些平台写成固定构建配置的做法并不准确，因此这里不再给出未经仓库验证的模板化参数。\n\n---\n\n## 📁 项目结构\n\n```\nlofi-radio-web/\n├── src/\n│   ├── app/                      # Next.js App Router\n│   │   ├── page.tsx             # 首页\n│   │   ├── layout.tsx           # 根布局\n│   │   ├── globals.css          # 全局样式\n│   │   ├── robots.ts            # robots.txt 路由\n│   │   ├── sitemap.ts           # sitemap.xml 路由\n│   │   └── api/                 # API 路由\n│   │       ├── bilibili-stream/ # B站直播流解析\n│   │       └── stations/        # 电台同步 API\n│   ├── components/              # 组件\n│   │   ├── lofi/                # Lofi 相关组件\n│   │   │   └── floating-player.tsx  # 浮动播放器\n│   │   ├── ui/                  # UI 基础组件\n│   │   └── theme-provider.tsx   # 主题提供者\n│   ├── hooks/                   # 自定义 Hooks\n│   │   ├── useAudioPlayer.ts    # 音频播放逻辑\n│   │   ├── useFocusTimer.ts     # 专注计时\n│   │   ├── useSleepTimer.ts     # 睡眠定时\n│   │   └── use-toast.ts         # Toast 提示\n│   ├── lib/                     # 工具库\n│   │   ├── stations.ts          # 电台配置\n│   │   ├── seo.ts               # SEO 配置与 metadata/schema 构建\n│   │   ├── seo-content.ts       # FAQ 等 SEO 文案内容\n│   │   └── utils.ts             # 工具函数\n│   └── store/                   # 状态管理\n│       └── audioStore.ts        # 音频状态\n├── public/                      # 静态资源\n│   ├── logo.svg                 # Logo\n│   └── manifest.json            # PWA 配置\n├── scripts/                     # 构建辅助脚本\n│   └── submit-indexnow.ts       # 手动提交 IndexNow\n├── package.json\n├── Dockerfile\n├── tailwind.config.ts\n├── next.config.ts\n└── LICENSE\n```\n\n---\n\n## 🔄 电台资源维护\n\n本项目电台资源采用「基础源 + 人工精选扩展」策略：\n\n- 基础参考来源： [labilio/lofi-radio](https://github.com/labilio/lofi-radio/blob/main/stations.json)\n- 扩展来源：Lofi Cafe、SomaFM、Code Radio 及其他公开流媒体电台\n\n更新方式：\n\n1. 评估新电台源的可用性与稳定性\n2. 更新 `src/lib/stations.ts` 中的 `stations` 数组\n3. 同步更新 README 的电台列表与总数\n4. 提交更改\n\n### SEO 相关文件\n\n- `src/lib/seo.ts`：集中管理 metadata、Open Graph、Twitter、Schema、robots 和 sitemap 配置\n- `src/lib/seo-content.ts`：管理首页 FAQ 等 SEO 可见文案内容\n- `src/app/robots.ts`：生成 `/robots.txt`\n- `src/app/sitemap.ts`：生成 `/sitemap.xml`\n\n---\n\n## 💬 反馈与协作\n\n为了让反馈更快进入可处理状态，请按内容选择入口：\n\n- [💬 Discussions](https://github.com/88lin/lofi-radio-web/discussions)：\n  使用问题、开放讨论、思路交流、暂不确定是否属于缺陷的问题\n- [🐛 Bug 反馈](https://github.com/88lin/lofi-radio-web/issues/new/choose)：\n  可复现的功能异常、回归问题、播放器或 API 故障\n- [🚀 功能建议](https://github.com/88lin/lofi-radio-web/issues/new/choose)：\n  新特性、交互优化、维护体验改进\n- [🛠️ 部署 / 环境问题](https://github.com/88lin/lofi-radio-web/issues/new/choose)：\n  安装、构建、部署、环境变量与平台兼容问题\n- [📻 电台源补充 / 内容维护](https://github.com/88lin/lofi-radio-web/issues/new/choose)：\n  新增电台、修复失效源、更新 README / 文案\n\n仓库已启用结构化 Issue 模板、PR 模板和自动维护流程。提报越完整，越容易被快速处理。\n\n## 🤝 贡献指南\n\n欢迎所有形式的贡献，但请尽量保持改动聚焦、上下文完整。\n\n1. Fork 本仓库\n2. 创建分支，例如 `fix/player-bug` 或 `feat/new-station-source`\n3. 完成修改并本地自检\n4. 推送分支并创建 Pull Request\n\n提交 PR 前，建议先阅读 [CONTRIBUTING.md](./CONTRIBUTING.md)，其中包含：\n\n- Issue / PR 的推荐提交流程\n- 本地开发与最少验证命令\n- 电台源与内容维护的注意事项\n- 对陌生贡献者更友好的协作约定\n\n---\n\n## 📄 开源协议 (License)\n\n本项目采用 [MIT License](LICENSE) 开源协议。\n\n- ✅ 你可以自由地使用、复制、修改和分发本项目。\n- 📝 请在衍生作品中保留原作者的版权声明。\n\n---\n\n## 🙏 致谢\n\n- [labilio/lofi-radio](https://github.com/labilio/lofi-radio) - 提供了丰富的电台资源和创作灵感\n- [Lofi Girl](https://www.youtube.com/c/LofiGirl) - 提供优质的 Lofi 音乐直播\n- 所有电台提供商\n\n---\n\n## 📮 联系方式\n\n如有问题或建议，欢迎：\n\n- [💬 Discussions](https://github.com/88lin/lofi-radio-web/discussions) - 参与讨论与使用交流\n- [🐛 提交 Issue](https://github.com/88lin/lofi-radio-web/issues/new/choose) - 按模板反馈问题或建议\n- [🤝 CONTRIBUTING](./CONTRIBUTING.md) - 查看协作规范与提交流程\n- [📝 博客](https://blog.88lin.eu.org/) - 茉灵智库\n\n---\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=88lin/lofi-radio-web\u0026type=date\u0026legend=top-left)](https://www.star-history.com/#88lin/lofi-radio-web\u0026type=date\u0026legend=top-left)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**如果这个项目对你有帮助，请给一个 ⭐ Star 支持一下！**\n\nMade with ❤️ by [茉灵智库](https://blog.88lin.eu.org/) · [GitHub](https://github.com/88lin)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F88lin%2Flofi-radio-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F88lin%2Flofi-radio-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F88lin%2Flofi-radio-web/lists"}