<button onclick="打击乐系统.保存节奏()">💾 保存</button>
<button onclick="打击乐系统.加载节奏()">📂 加载</button>
</div>

<!-- 节奏模式 -->
<div class="section-title">🎶 节奏模式</div>
<div class="pattern-selector">
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('rock')">摇滚节奏</button>
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('pop')">流行节奏</button>
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('jazz')">爵士节奏</button>
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('hiphop')">嘻哈节奏</button>
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('reggae')">雷鬼节奏</button>
<button class="pattern-btn" onclick="打击乐系统.加载节奏模式('custom')">自定义</button>
</div>

<!-- 音效控制 -->
<div class="section-title">⚙️ 音效控制</div>
<div class="slider-container">
<div class="slider-label">
<span>节奏速度</span>
<span id="tempoValue">120 BPM</span>
</div>
<input type="range" id="tempoControl" min="60" max="240" value="120">
</div>

<div class="slider-container">
<div class="slider-label">
<span>音量</span>
<span id="volumeValue">80%</span>
</div>
<input type="range" id="volumeControl" min="0" max="100" value="80">
</div>

<!-- 输出日志 -->
<div class="output" id="output">
<div class="output-line">打击乐编排器已就绪！点击鼓组试听音色，在节奏网格中编排节奏。</div>
</div>
</div>
</div>

<script>
// 打击乐编排系统
class 打击乐编排系统 {
constructor() {
this.音频上下文 = new (window.AudioContext || window.webkitAudioContext)();
this.播放状态 = 'stopped';
this.当前节奏 = 120;
this.当前音量 = 0.8;
this.节奏数据 = {};
this.当前播放步进 = 0;
this.播放定时器 = null;

this.鼓组配置 = this.创建鼓组配置();
this.节奏模式 = this.创建节奏模式();

this.初始化鼓组();
this.初始化节奏编排器();
this.初始化控件();
}

创建鼓组配置() {
return {
'底鼓': { type: 'sine', freq: 100, duration: 0.3, color: '#4CAF50' },
'军鼓': { type: 'noise', freq: 200, duration: 0.2, color: '#2196F3' },
'踩镲': { type: 'highpass', freq: 8000, duration: 0.1, color: '#FF9800' },
'通鼓1': { type: 'sine', freq: 150, duration: 0.3, color: '#9C27B0' },
'通鼓2': { type: 'sine', freq: 120, duration: 0.3, color: '#673AB7' },
'吊镲': { type: 'noise', freq: 10000, duration: 0.5, color: '#00BCD4' },
'拍手': { type: 'noise', freq: 500, duration: 0.1, color: '#E91E63' },
'打击乐': { type: 'square', freq: 300, duration: 0.2, color: '#795548' }
};
}

创建节奏模式() {
return {
rock: [
{ 底鼓: [1, 5, 9, 13] },
{ 军鼓: [3, 7, 11, 15] },
{ 踩镲: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] }
],
pop: [
{ 底鼓: [1, 5, 9, 13] },
{ 军鼓: [5, 13] },
{ 踩镲: [1, 3, 5, 7, 9, 11, 13, 15] }
],
jazz: [
{ 底鼓: [2, 6, 10, 14] },
{ 军鼓: [4, 8, 12, 16] },
{ 踩镲: [2, 4, 6, 8, 10, 12, 14, 16] }
],
hiphop: [
{ 底鼓: [1, 4, 7, 11, 14] },
{ 军鼓: [3, 8, 12] },
{ 踩镲: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] }
],
reggae: [
{ 底鼓: [3, 7, 11, 15] },
{ 军鼓: [5, 13] },
{ 踩镲: [2, 4, 6, 8, 10, 12, 14, 16] }
]
};
}

初始化鼓组() {
const 鼓组容器 = document.getElementById('drumPads');
鼓组容器.innerHTML = '';

Object.keys(this.鼓组配置).forEach(鼓名 => {
const 鼓按钮 = document.createElement('button');
鼓按钮.className = 'drum-pad';
鼓按钮.textContent = 鼓名;
鼓按钮.onclick = () => this.播放鼓声(鼓名);
鼓组容器.appendChild(鼓按钮);
});
}

初始化节奏编排器() {
const 编排器 = document.getElementById('sequencerGrid');
编排器.innerHTML = '';

// 创建标签行
const 标签行 = document.createElement('div');
标签行.className = 'step-label';
标签行.textContent = '鼓组';
编排器.appendChild(标签行);

// 创建步进标签
for (let i = 1; i <= 16; i++) {
const 步进标签 = document.createElement('div');
步进标签.className = 'step-label';
步进标签.textContent = i;
编排器.appendChild(步进标签);
}

// 创建鼓组行
Object.keys(this.鼓组配置).forEach(鼓名 => {
const 鼓标签 = document.createElement('div');
鼓标签.className = 'step-label';
鼓标签.textContent = 鼓名;
鼓标签.style.background = this.鼓组配置[鼓名].color;
编排器.appendChild(鼓标签);

for (let i = 1; i <= 16; i++) {
const 单元格 = document.createElement('div');
单元格.className = 'step-cell';
单元格.dataset.drum = 鼓名;
单元格.