<div class="control-group">
<label>和声强度</label>
<input type="range" id="harmony-intensity" min="0" max="100" value="50">
</div>
</div>
</div>

<div class="section">
<h3>⏱️ 节奏设置</h3>
<div class="effect-controls">
<div class="control-group">
<label>拍号</label>
<select id="time-signature">
<option value="4/4">4/4拍</option>
<option value="3/4">3/4拍</option>
<option value="6/8">6/8拍</option>
<option value="2/4">2/4拍</option>
</select>
</div>
<div class="control-group">
<label>摇摆感</label>
<input type="range" id="swing" min="0" max="100" value="0">
</div>
</div>
</div>
</div>

<!-- 底部控制栏 -->
<div class="footer">
<div class="transport-controls">
<button class="transport-btn play-btn" id="play-btn">
<span>▶️</span>
<span>播放</span>
</button>
<button class="transport-btn stop-btn" id="stop-btn">
<span>⏹️</span>
<span>停止</span>
</button>
<button class="transport-btn" id="record-btn">
<span>⏺️</span>
<span>录制</span>
</button>
<button class="transport-btn" id="loop-btn">
<span>🔁</span>
<span>循环</span>
</button>
</div>

<div class="progress-container">
<div class="progress-bar">
<div class="progress" id="progress"></div>
<div class="section-markers" id="section-markers"></div>
</div>
<div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--secondary);">
<span id="current-time">00:00</span>
<span id="total-time">00:00</span>
</div>
</div>

<div class="status-display">
<div class="current-section" id="current-section">[准备就绪]</div>
<div style="font-size: 12px; color: var(--secondary);">
<span id="current-bpm">BPM: 120</span> |
<span id="current-voice">发音人: 温柔女声</span>
</div>
</div>
</div>
</div>

<script>
// 🎵 高级音乐编排与情感语音合成系统
class AdvancedMusicSystem {
constructor() {
this.audioContext = null;
this.isPlaying = false;
this.isRecording = false;
this.isLooping = false;
this.currentTime = 0;
this.totalTime = 0;
this.sections = [];
this.currentSectionIndex = 0;
this.emotionProfile = {
happiness: 50,
sadness: 20,
anger: 10,
calmness: 70
};
this.effectProfile = {
reverb: 30,
delay: 20,
chorus: 15,
compression: 40
};
this.currentVoice = 'female1';
this.currentInstrument = 'piano';
this.bpm = 120;
this.timeSignature = '4/4';
this.harmonyType = 'none';
this.harmonyIntensity = 50;
this.swing = 0;

this.audioNodes = new Map();
this.recordingData = [];
this.animationFrame = null;

this.init();
}

// 初始化系统
async init() {
try {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
console.log('✅ 高级音频系统初始化成功');

// 初始化音频效果节点
await this.initAudioEffects();

// 加载预设
this.loadPresets();

// 设置事件监听
this.setupEventListeners();

// 初始化可视化
this.initVisualization();

// 预加载语音
await this.preloadVoices();

} catch (error) {
console.error('❌ 音频系统初始化失败:', error);
}
}

// 初始化音频效果
async initAudioEffects() {
// 创建混响效果
const reverb = this.audioContext.createConvolver();
this.audioNodes.set('reverb', reverb);

// 创建延迟效果
const delay = this.audioContext.createDelay();
delay.delayTime.value = 0.3;
const delayGain = this.audioContext.createGain();
delayGain.gain.value = 0.3;
delay.connect(delayGain);
delayGain.connect(delay);
this.audioNodes.set('delay', { delay, gain: delayGain });

// 创建压缩器
const compressor = this.audioContext.createDynamicsCompressor();
compressor.threshold.value = -24;
compressor.knee.value = 30;
compressor.ratio.value = 12;
compressor.attack.value = 0.003;
compressor.release.value = 0.25;
this.audioNodes.set('compressor', compressor);

// 连接到主输出
this.setupEffectChain();
}

// 设置效果链
setupEffectChain() {
// 效果链: 源 -> 压缩 -> 延迟 -> 混响 -> 输出
const compressor = this.audioNodes.get('compressor');
const delay = this.audioNodes.get('delay').delay;
const reverb = this.audioNodes.get('reverb');

compressor.connect(delay);
delay.connect(reverb);
reverb.connect(this.audioContext.destination);
}

// 预加载语音
async preloadVoices() {
if ('speechSynthesis' in window) {
return new Promise((resolve) => {
let voices = speechSynthesis.getVoices();
if (voices.length) {
this.availableVoices = voices;
resolve();
} else {
speechSynthesis.