⚠️ 重要说明由于我个人学习编程的方向改变，我已不再研究前端编程，本项目已全程 Vibe Coding 完成开发。
# 🌳 班级朗读养树系统
一个基于浏览器音频检测的课堂激励工具，通过朗读挑战帮助学生培养习惯，以"种树"形式可视化成长。
## 📌 项目目标
### 核心目标
开发一款纯前端、开箱即用的课堂激励工具，教师无需配置服务器，只需打开浏览器即可使用。
### 用户场景
- 教师打开网页，允许麦克风权限
- 学生进行朗读挑战（音量需超过设定阈值）
- 挑战成功 → 生长树苗 → 2 棵苗合成 1 棵树
- 班级小树数量实时排名，形成正向激励
### 预期效果
- 提升学生朗读积极性
- 可视化班级朗读成果
- 为教师提供简单的课堂管理工具
## 🎯 功能规划
### Phase 1：核心机制（朗读挑战）
✅ 麦克风权限请求与音量实时检测
✅ 音量阈值设置（默认 50 分贝）
✅ 倒计时机制（默认 60 秒）
✅ 挑战成功 → 生长树苗（🌳）
✅ 挑战失败提示（音量不足时倒计时暂停）
### Phase 2：班级管理系统
✅ 学生名单管理（导入自定义名单）
✅ 小组划分（支持自定义小组成员）
✅ 为每位学生记录小树数量
✅ 手动调整小树数量（+1 / -1）
### Phase 3：激励体系
✅ 个人排行榜（按小树数量排序）
✅ 小组排行榜（按人均小树排序）
✅ 全班人均小树统计
### Phase 4：体验优化
✅ 响应式布局（支持平板、手机）
✅ 设置面板（可调阈值、倒计时时长）
✅ 数据导出/导入（TXT 备份）
✅ 操作动画反馈（生长、删除）
### Phase 5：扩展功能
✅ 自习养树（音量低于阈值才可生长）
图例：⬜ 未开始 | 🟡 进行中 | ✅ 已完成
- 下载项目到本地
- 双击
index.html文件即可使用
python -m http.server 8000npx http-server -p 8000然后在浏览器访问 http://localhost:8000
- 点击"进入朗读养小树"或导航栏"朗读模式"
- 允许浏览器访问麦克风
- 设置音量阈值（默认 50 分贝）和倒计时时间
- 点击"开始检测"
- 当音量超过阈值时，倒计时开始
- 倒计时结束后，自动给当前学生种一棵树
- 学生轮流循环，每人每次获得一棵树
- 点击"进入自习养小树"或导航栏"自习模式"
- 允许浏览器访问麦克风
- 设置安静阈值（默认 30 分贝）和倒计时时间
- 点击"开始检测"
- 当音量低于阈值时（保持安静），倒计时开始
- 倒计时结束后，自动给当前学生种一棵树
- 点击"导入名单"按钮
- 按照以下格式输入学生名单：
第一组：张三，李四，王五 第二组：赵六，钱七，刘八 - 点击"确认导入"
在学生列表中，每个学生右侧有 + 和 - 按钮，可以手动增加或减少小树数量。
点击"导出数据"按钮，可以将当前学生数据导出为 JSON 文件。
## 🛠️ 技术栈
| 技术 | 用途 |
| ---------------- | ----- |
| HTML5 | 页面结构 |
| CSS3 | 样式与动画 |
| JavaScript (ES6) | 交互逻辑 |
| Web Audio API | 音频检测 |
| LocalStorage | 数据存储 |
## 📁 项目结构
class-reading-tree/
├── index.html # 首页导航
├── read-mode.html # 朗读模式（核心功能）
├── quiet-mode.html # 安静模式
├── style/
│ ├── public.css # 公共样式
│ ├── read.css # 朗读模式样式
│ ├── quiet.css # 自习模式样式
│ └── icon.png # 网页图标
├── js/
│ ├── microphone.js # 麦克风检测模块
│ ├── tree.js # 种树逻辑模块
│ ├── student.js # 学生管理模块
│ └── ranking.js # 排行榜模块
└── date/
└── defaultStudents.txt # 默认学生数据
## 🎨 样式特点
- 朗读模式：绿色主题，象征朗读时的活跃氛围
- 自习模式：蓝色主题，象征安静平和的环境
- 导航栏：当前模式按钮颜色变深，方便识别
- 响应式设计：适配各种屏幕尺寸
## 🤝 参与贡献
欢迎贡献代码、报告 Bug 或提出新功能建议！
请先阅读 贡献指南 了解详细流程。
本项目采用 MIT 协议，你可以自由使用、修改、分发。
🌟 如果这个项目对你有帮助，欢迎点个 Star！