# midi_sampler

**Repository Path**: ctrlplay/midi_sampler

## Basic Information

- **Project Name**: midi_sampler
- **Description**: A simple, browser-based MIDI sampler built with the Web Audio and Web MIDI APIs.
- **Primary Language**: C
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-09
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MIDI 采样器

一个基于 Web Audio 和 Web MIDI API 构建的、简单的浏览器端 MIDI 采样器。连接您的 MIDI 控制器，映射您的音符，然后开始演奏吧！

**[➡️ 在线演示](https://hsgw.github.io/midi_sampler/)**

---

## ✨ 功能特性

*   **MIDI 输入：** 连接任何 MIDI 控制器来播放音频采样。
*   **可自定义映射：** 直接在用户界面中轻松地将 MIDI 音符映射到不同的音频采样。
*   **实时可视化：** 查看每个采样的波形图，播放时带有播放指针和背景淡出效果。
*   **设置持久化：** 您自定义的音符映射会自动保存在浏览器的本地存储中。
*   **响应式设计：** 网格布局能够自适应横屏和竖屏方向。
*   **零依赖：** 使用原生 JavaScript、HTML 和 CSS 构建。无需任何框架。

## 🛠️ 技术栈

*   HTML5
*   CSS3（使用 CSS 变量）
*   原生 JavaScript (ES6+)
*   [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
*   [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API)

## 🚀 使用方法

1.  **打开 [在线演示](https://YOUR_USERNAME.github.io/midi-sampler/)。**
2.  将您的 MIDI 设备连接到电脑。
3.  点击屏幕任意位置以启动音频上下文。
4.  在您的 MIDI 设备上弹奏音符来触发默认的声音。
5.  要更改映射，请点击某个波形图以打开设置面板，然后调整 MIDI 音符编号或从下拉菜单中选择不同的采样。更改会自动保存。

## 📂 项目结构

```
/
├── samples/              # 音频采样文件 (.flac)
├── index.html            # 主 HTML 文件
├── style.css             # 应用程序的所有样式
└── script.js             # 应用程序的所有逻辑
```

## 🙏 致谢

本项目在 AI 编程助手 (Gemini Code Assist) 的协助下开发完成。

## 📜 许可证

本项目源代码采用 MIT 许可证授权 - 详见 [LICENSE](LICENSE) 文件。

**关于音频采样的说明：** `samples/` 目录中的音频文件来自外部合集，采用 GPLv2 许可证授权。详情请参阅 `samples/readme.md`。