<div>🎺 铜管</div>
</div>
</div>
</div>

<div class="section">
<h3>🎭 情感控制</h3>
<div class="emotion-controls">
<div class="emotion-slider">
<label>
<span>喜悦</span>
<span class="emotion-value" id="happiness-value">50%</span>
</label>
<input type="range" class="emotion" data-emotion="happiness" min="0" max="100" value="50">
</div>
<div class="emotion-slider">
<label>
<span>悲伤</span>
<span class="emotion-value" id="sadness-value">20%</span>
</label>
<input type="range" class="emotion" data-emotion="sadness" min="0" max="100" value="20">
</div>
<div class="emotion-slider">
<label>
<span>愤怒</span>
<span class="emotion-value" id="anger-value">10%</span>
</label>
<input type="range" class="emotion" data-emotion="anger" min="0" max="100" value="10">
</div>
<div class="emotion-slider">
<label>
<span>平静</span>
<span class="emotion-value" id="calmness-value">70%</span>
</label>
<input type="range" class="emotion" data-emotion="calmness" min="0" max="100" value="70">
</div>
</div>
</div>
</div>

<!-- 主内容区 -->
<div class="main-content">
<div class="editor-container">
<div class="editor-tabs">
<div class="tab active" data-tab="lyrics">歌词编辑器</div>
<div class="tab" data-tab="melody">旋律编辑器</div>
<div class="tab" data-tab="arrangement">编曲面板</div>
<div class="tab" data-tab="structure">歌曲结构</div>
</div>
<textarea class="editor" id="lyrics-editor" placeholder="在此输入歌词...&#10;使用标记定义歌曲结构:&#10;[主歌]&#10;这是主歌部分的歌词&#10;[副歌]&#10;这是副歌部分的歌词&#10;[间奏]&#10;等待8小节&#10;[预副歌]&#10;过渡到副歌的部分">
[主歌]
轻轻的我走了，正如我轻轻的来
我轻轻的招手，作别西天的云彩

[副歌]
那河畔的金柳，是夕阳中的新娘
波光里的艳影，在我的心头荡漾

[间奏]
等待4小节

[预副歌]
软泥上的青荇，油油的在水底招摇
在康河的柔波里，我甘心做一条水草

[副歌]
那榆荫下的一潭，不是清泉，是天上虹
揉碎在浮藻间，沉淀着彩虹似的梦
</textarea>
<textarea class="editor" id="melody-editor" style="display: none;" placeholder="在此输入旋律...&#10;使用简谱或MIDI格式"></textarea>
<textarea class="editor" id="arrangement-editor" style="display: none;" placeholder="在此进行编曲..."></textarea>
<textarea class="editor" id="structure-editor" style="display: none;" placeholder="在此定义歌曲结构..."></textarea>
</div>

<div class="visualization">
<div class="waveform" id="waveform">
<div style="position: absolute; top: 10px; left: 10px; font-size: 12px; color: var(--primary);">波形显示</div>
</div>
<div class="spectrum" id="spectrum">
<div style="position: absolute; top: 10px; left: 10px; font-size: 12px; color: var(--primary);">频谱分析</div>
</div>
<div class="timeline" id="timeline">
<div style="position: absolute; top: 10px; left: 10px; font-size: 12px; color: var(--primary);">时间线</div>
</div>
</div>
</div>

<!-- 右侧高级控制面板 -->
<div class="advanced-panel">
<div class="section">
<h3>🎛️ 音频效果</h3>
<div class="effect-controls">
<div class="effect-slider">
<label>
<span>混响</span>
<span class="emotion-value" id="reverb-value">30%</span>
</label>
<input type="range" class="effect" data-effect="reverb" min="0" max="100" value="30">
</div>
<div class="effect-slider">
<label>
<span>延迟</span>
<span class="emotion-value" id="delay-value">20%</span>
</label>
<input type="range" class="effect" data-effect="delay" min="0" max="100" value="20">
</div>
<div class="effect-slider">
<label>
<span>合唱</span>
<span class="emotion-value" id="chorus-value">15%</span>
</label>
<input type="range" class="effect" data-effect="chorus" min="0" max="100" value="15">
</div>
<div class="effect-slider">
<label>
<span>压缩</span>
<span class="emotion-value" id="compression-value">40%</span>
</label>
<input type="range" class="effect" data-effect="compression" min="0" max="100" value="40">
</div>
</div>
</div>

<div class="section">
<h3>🎼 和声设置</h3>
<div class="effect-controls">
<div class="control-group">
<label>和声类型</label>
<select id="harmony-type">
<option value="none">无和声</option>
<option value="octave">八度和声</option>
<option value="third">三度和声</option>
<option value="fifth">五度和声</option>
<option value="full">完整和声</option>
</select>
</div>