按住两键松开首个时为何触发额外键盘事件？WebAudioAPI合成器问题

问题场景 #

开发Web Audio API合成器时，绑定keydown播放声音、keyup停止声音，遇到以下异常：
按住Q键再按住W键，松开Q键（保持W键按住）时，W键的keydown会额外触发一次非重复事件，导致出现无法停止的多余声音。已添加if(e.repeat)拦截单键重复触发，但无效，更换多个键盘仍能复现。

复现验证 #

用以下最小代码可复现该异常：

document.body.addEventListener('keydown', (e) => {
    if (!e.repeat) {
        console.log(e.type, e.key);
    }
});
document.body.addEventListener('keyup', (e) => {
    console.log(e.type, e.key);
});

复现步骤：

• 点击文档获取焦点
• 按住Q键
• 按住W键
• 松开Q键
  此时控制台会输出：keydown q → keydown w → keyup q → keydown w，最后这个keydown w即为异常触发的非重复事件。

问题根源 #

这是操作系统的键盘事件行为：当按住多个按键，松开先按下的键时，部分系统会重新发送当前按住键的keydown事件（e.repeat为false），属于系统层面的默认行为，并非键盘或浏览器bug。原代码依赖事件触发次数维护按键状态，无法识别这种系统补发的事件，导致重复调用声音播放逻辑。

修复方案 #

核心思路是自行维护精确的按键状态，而非依赖事件触发次数。用一个对象记录每个按键的按下状态，仅在状态从未按下转为按下时触发播放，松开时直接更新状态并停止声音。

修改后的事件处理代码：

// 用对象维护按键状态，键为键盘code，值为是否处于按住状态
const keyStates = {};

document.body.addEventListener('keydown', (e) => {
    // 仅当按键从未按住转为按住时，执行播放逻辑
    if (!keyStates[e.code]) {
        keyStates[e.code] = true;
        this.eventStart(e, true); // 你的声音播放函数
    }
});

document.body.addEventListener('keyup', (e) => {
    // 松开按键时直接更新状态并停止声音
    keyStates[e.code] = false;
    this.eventStop(e, true); // 你的声音停止函数
});

原代码问题分析 #

原代码通过heldKeys数组维护按住的按键，但异常触发的keydown事件是新的事件对象，与数组中已存的W键事件对象引用不同，导致removeElementsFromArrayByProperty可能无法正确移除旧状态，最终多次调用eventStart，而keyup只能停止一次，留下无法终止的多余声音。

内容的提问来源于stack exchange，提问作者Jack Grbovic