在线和弦生成器：选个调式点几下，好听的伴奏立刻弹出来

想听一个和弦好不好听，以前要么会弹琴，要么去搜音频素材。这个工具把和弦理论塞进浏览器：选个大调、小调或其它调式，点一个和弦级数，它就地按音程规则算出根音、三音、五音，再用 Web Audio 合成琶音播给你听；节奏型、音色、速度都能换，点虚拟钢琴还能试单个音。先听成品，再讲这个网页怎么用一段提示词做成单文件应用并部署上线。

这个工具做什么

它把「和弦生成器」做成一个零依赖的单页应用：

• 调式覆盖常见需求：大调、自然小调、和声小调、旋律小调，再带上多利亚、混合利底亚、利底亚、弗里吉亚。
• I ~ VII 级直接点：点一个级数，立即合成该级和弦并显示名称、构成音和性质。
• 自动琶音播放：根音、三音、五音按节奏拆开调度，三和弦和七和弦都能播。
• 7 种节奏型：上行琶音、齐奏、摇摆、切分、扫弦、轮指，换一种立刻听出不同。
• 6 种音色：钢琴、风琴、拨弦、合成、钟声、电钢琴，还能选慢/中/快三档速度。
• 虚拟钢琴试听：点键盘试单个音，输入反馈即时响应。
• 最近演奏回放：最近一段演奏会被记住，一键再听一次。

准备环境：进入码道CodeArts

本文用 CodeArts 的 WebUI 版来演示。先进入 CodeArts 并开通体验版，不需要装任何软件，浏览器就能用：

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「在线和弦生成器」网页应用：用户可以选择大调/小调等调式、选择 I/IV/V 等常见和弦级数，也可以点按虚拟钢琴键试听；应用按和弦构成规则自动合成并播放琶音，显示当前和弦名称与构成音；支持节奏型切换、音色切换，并能回放最近一段演奏；界面简洁美观，单个网页即跑即玩。完成后部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这个项目里的实际动作：

• 在 /workspace/chord-generator 下创建单文件 index.html，把和弦理论、Web Audio 合成、节奏调度、虚拟键盘和回放都写进一个文件，无第三方依赖。
• 写入后自查发现几处笔误，主动用 edit 修正；再加 node --check 做 JS 语法校验。
• 探测空闲端口、启动 python3 -m http.server，自检 HTTP 200 后给出内部预览地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 音阶只存「音程数组」，和弦从数组推导

调式之间最本质的差别就是音与音之间的半音距离。SCALES 不用硬编码每个调的十二个音，只存 [0,2,4,5,7,9,11] 这类音程数组，根音一动，整条音阶就跟着平移：

const SCALES = {
  major:        { name:'大调 (Ionian)',     intervals:[0,2,4,5,7,9,11] },
  minor:        { name:'自然小调 (Aeolian)', intervals:[0,2,3,5,7,8,10] },
  harmonicMinor:{ name:'和声小调',           intervals:[0,2,3,5,7,8,11] },
  dorian:       { name:'多利亚 (Dorian)',    intervals:[0,2,3,5,7,9,10] },
  mixolydian:   { name:'混合利底亚 (Mixolydian)', intervals:[0,2,4,5,7,9,10] },
};
const midiToFreq = m => 440 * Math.pow(2, (m - 69) / 12);

midiToFreq 是后面的发声基础：MIDI 音高转真实频率，440Hz 的 A4 对应 MIDI 69，每个半音乘上 2^(1/12)。

2. 第 n 级和弦用「取模 + 跨八度」拼出来

三和弦就是调内隔一级取一个音：根音、三音、五音。代码用 idx % 7 在音阶里循环取值，再用 12 * floor(idx/7) 跨到更高八度，原生支持七和弦：

function buildChord(){
  const intervals = SCALES[scaleKey].intervals;
  const base = 60 + rootPc;
  const idx = degree - 1;
  const rootMidi = base + intervals[idx % 7] + 12 * Math.floor(idx / 7);
  const thirdMidi = base + intervals[(idx + 2) % 7] + 12 * Math.floor((idx + 2) / 7);
  const fifthMidi = base + intervals[(idx + 4) % 7] + 12 * Math.floor((idx + 4) / 7);
  let notes = [rootMidi, thirdMidi, fifthMidi];
  let seventhMidi = null;
  if(chordType === 'seventh'){
    seventhMidi = base + intervals[(idx + 6) % 7] + 12 * Math.floor((idx + 6) / 7);
    notes.push(seventhMidi);
  }
}

随后再用三音距离判断大三、小三、增三，用五音距离判断减三，和弦性质和简写标记一起得出。

3. 节奏型是「顺序 + 间隔」，不是写死每个音符

琶音、齐奏、摇摆、切分的差别，说到底就是「按什么顺序弹、每个音间隔多久」。RHYTHMS 用 order 定顺序，gaps 定间隔，simultaneous 表示是否全部同时按下：

const RHYTHMS = {
  arpeggio:   { name:'琶音 (上行)', order:[0,1,2,3], gaps:[0,1,1,1], dur:1.4 },
  block:      { name:'齐奏 (柱式)', order:[0,1,2,3], gaps:[0,0,0,0], dur:1.6, simultaneous:true },
  syncopated: { name:'切分',       order:[0,2,1,3], gaps:[0,0.6,1.2,0.6], dur:1.2 },
  rollDown:   { name:'下行扫弦',    order:[3,2,1,0], gaps:[0,0.4,0.4,0.4], dur:1.6 },
};

播放时先按 BPM 算出每拍长度，再按 order 依次给每个音符累加时刻，最后交给 Web Audio 调度。

4. 音色靠 Web Audio 的振荡器 + 包络合成

没有音频文件，全靠浏览器实时合成。钢琴用接近三角波的音色加轻微失谐，钟声和电钢琴再叠一个高八度泛音，拨弦则加低通滤波模拟短促的弹拨：

function playNote(midi, when, dur, voiceKey){
  const a = ensureAudio();
  const v = VOICES[voiceKey];
  const freq = midiToFreq(midi);
  const t0 = a.currentTime + when;
  const gain = a.createGain();
  gain.connect(master);

  const osc = a.createOscillator();
  osc.type = v.wave;
  osc.frequency.value = freq;
  osc.connect(gain);

  if(v.detune){
    const osc2 = a.createOscillator();
    osc2.type = v.wave;
    osc2.frequency.value = freq * (1 + 0.003);
    const g2 = a.createGain();
    g2.gain.value = v.detuneGain;
    osc2.connect(g2).connect(gain);
  }
}

VOICES 里每种音色都带自己的波形、起音、衰减、延音、释放参数，切换音色不需要换整套引擎，只换参数对象。

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-chord-machine

总结

在线和弦生成器把「听感」拆回两件事：和弦由音程数组推导，节奏和音色用参数对象组合。这样做的好处是换一种调式、节奏或音色，都只是换一组数据，不碰核心引擎；Web Audio 全在客户端合成，也省去了素材文件。后续可以继续加「和弦进行收藏」「导出 MIDI」「自动伴奏循环」，或者把虚拟钢琴扩展成可录入旋律的 mini 键盘。