Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iola1999/metronome


https://github.com/iola1999/metronome

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# 🎵 AI 驱动的节拍器



> 这是一个完全由 AI 协助开发的项目，包括这份 README！

>

> 开发过程：人类提需求，AI 写代码。



## 🤖 项目介绍



一个简单但功能完整的在线节拍器应用，支持 PWA 安装。



🌐 在线体验：[https://metronome.678234.xyz/](https://metronome.678234.xyz/)



### 📱 安装到设备



本应用支持 PWA 安装，安装后可获得更好的使用体验：

- 离线可用

- 全屏显示

- 快速启动

- 节省流量



#### iOS 安装步骤

1. 使用 Safari 浏览器打开应用

2. 点击底部分享按钮 (□↑)

3. 滚动并选择"添加到主屏幕"

4. 点击"添加"完成安装



#### Android 安装步骤

1. 使用 Chrome 浏览器打开应用

2. 等待出现"添加到主屏幕"提示

   - 或点击菜单 (⋮)

   - 选择"添加到主屏幕"

3. 点击"安装"完成



#### 桌面端安装

1. 使用 Chrome/Edge 浏览器打开应用

2. 点击地址栏右侧的安装图标

3. 点击"安装"完成



## ✨ 特点



- 代码由 Cursor AI 生成

- SSG 静态站点生成

- PWA 支持，可安装到设备

- IndexedDB 本地存储

- 响应式设计

- 简洁直观的界面



## 🎯 功能



### 节拍器核心功能

- 速度调节 (30-240 BPM)

- 速度预设按钮 (60/90/120/160)

- 首拍重音

- 节拍可视化

- 摆锤动画效果

- 多种音效选择

  - 电子音 - 清脆高频

  - 点击音 - 标准节拍声

  - 木鱼音 - 低沉共鸣

- 音量设置

  - 独立的普通拍和重拍音量控制

  - 音量设置自动保存



### 录音功能

- 一键录音开始/停止

- 录音时长实时显示

- 录音历史管理

  - 支持播放/暂停、删除

  - 支持分享/下载

- 播放进度条显示

- 多格式音频支持



### 数据存储

- 使用 IndexedDB 存储录音

- 自动保存最后使用的速度

- 持久化保存音效和音量设置



## 🛠 技术栈



- Astro - SSG 静态站点生成

- React + TypeScript

- Emotion - CSS-in-JS

- Vite - 构建工具

- IndexedDB - 本地存储

- Web Audio API - 音频处理

- MediaRecorder API - 录音功能

- Service Worker - PWA 支持

- Zustand - 状态管理

- HTTPS 支持 - 用于录音权限



## 🔒 隐私说明



- 所有数据均存储在本地

- 录音需要麦克风权限

- 无需网络连接（首次加载后）