# RndBeat-web

**Repository Path**: xaek/rnd-beat-web

## Basic Information

- **Project Name**: RndBeat-web
- **Description**: 一款专注于节奏训练的轻量级 Web 应用，按用户设定的规则无限随机生成鼓点序列。整拍与拍内鼓点在听觉和视觉上均有明确区分，帮助练习不同节奏型。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-07
- **Last Updated**: 2026-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 随机鼓点（rnd-beat-web）

一款专注于节奏训练的轻量级 Web 应用，按用户设定的规则无限随机生成鼓点序列。整拍与拍内鼓点在听觉和视觉上均有明确区分，帮助练习不同节奏型。

## 功能特性

- **节奏模式**：整拍模式（仅整拍）、拍内随机模式（每拍 0~3 个均匀分布的拍内点）
- **速度控制**：BPM 数字输入（无功能上下限）+ 滑块（40~200 视觉范围，超出范围时滑块顶格显示）
- **无限循环**：每次生成 4 拍序列，播完自动生成下一组
- **音色区分**：整拍底鼓（Kick）、拍内军鼓（Snare），拍内带轻微随机音高
- **可视化**：红/蓝条形指示灯，当前鼓点高亮跳动

## 技术选型

| 类别 | 选型 |
| --- | --- |
| 标记与样式 | HTML5 + CSS3 |
| 逻辑与音频 | JavaScript + Web Audio API |

详细需求见 [【随机鼓点】产品需求文档.md](./【随机鼓点】产品需求文档.md)。

## 快速开始

```bash
# 克隆仓库
git clone https://gitee.com/xaek/rnd-beat-web.git
cd rnd-beat-web

# 本地预览（任选其一）
npx serve .
# 或
python -m http.server 8080
```

浏览器访问提示的地址（如 `http://localhost:3000`），选择节奏模式、调整 BPM 后点击「开始」即可播放。

> 首次播放需用户点击「开始」以激活 Web Audio API（浏览器自动播放策略）。

## 项目结构

```
rnd-beat-web/
├── index.html              # 单页 UI 入口
├── css/
│   └── style.css           # 布局与指示灯样式
├── js/
│   ├── beatGenerator.js    # RhythmMode 枚举与鼓点序列生成
│   ├── audioEngine.js      # Web Audio API 音色合成与调度
│   ├── visualizer.js       # 红/蓝条形指示灯与高亮
│   └── main.js             # 播放状态机、BPM 联动与 UI 事件
├── README.md
├── LICENSE
└── 【随机鼓点】产品需求文档.md
```

## 许可证

[MIT](./LICENSE)