Javascript Keyup事件取消keydown重复

此代码是30天Vanilla JS挑战的一部分

如果按住声音键，声音将继续播放，但无法注意到“已结束”事件（删除“播放”类），除了“D”和“L”，因为声音持续时间太短（分别约0.16秒和约0.04秒）

但有两件事我真的不明白：

当您按下“A”并按下另一个声音键（并保持 上一次按下的键（'A'）停止“循环”并等待 新的声音键在再次“循环”之前结束。但是 根据我编写的代码，如果键是向下的（在keyStatus映射中），那么 应该播放声音

如果我按下一个或多个键，声音会“循环”，但 一旦我触发一个键向上，所有其他仍然向下的键停止 触发他们的事件。JS如何处理这些情况

我希望我说得够清楚了

const allAudio=document.queryselectoral（'audio'）； allAudio.forEach（音频=>audio.addEventListener（'ended'，（）=>{ 让dataKey=audio.getAttribute（'data-key'）； document.querySelector（`.key[data key=“${dataKey}”]`）.classList.remove（'playing'）； })); 设keyStatus={}； addEventListener（'keyup'，e=>handleKeyPress（e））； addEventListener（'keydown'，e=>handleKeyPress（e））； 功能手柄按键（事件）{ console.log（事件）； 如果（event.key==未定义） 返回； keyStatus[event.key]=event.type==“keydown”； 用于（输入keyStatus）{ if（keyStatus[key]） 播放声音（键）； } } 播放声音功能（数据键）{ 让key=document.querySelector（`.key[data key=“${dataKey}]”`）； 让audio=document.querySelector（`audio[data key=“${dataKey}]”`）； 如果（关键）{ key.classList.add（'playing'）； } 中频（音频）{ 音频播放（）； } }

html{
字体大小：10px；
背景：url(http://i.imgur.com/b9r5sEL.jpg)底部中心；
背景尺寸：封面；
}
正文，html{
保证金：0；
填充：0；
字体系列：无衬线；
}
.钥匙{
显示器：flex；
弹性：1；
最小高度：100vh；
对齐项目：居中；
证明内容：中心；
}
.钥匙{
边框：.4rem纯黑色；
边界半径：.5rem；
保证金：1rem；
字体大小：1.5rem；
填充：1rem.5rem；
过渡：全部.07s缓解；
宽度：10雷姆；
文本对齐：居中；
颜色：白色；
背景：rgba（0,0,0,0.4）；
文本阴影：0.5rem黑色；
}
.玩{
转换：比例（1.1）；
边框颜色：#ffc600；
盒影：0 0 1rem#ffc600；
}
kbd{
显示：块；
字号：4rem；
}
.声音{
字号：1.2rem；
文本转换：大写；
字母间距：.1rem；
颜色：#ffc600；
}

JS鼓套件
A.
鼓掌
s
hihat
D
踢
F
敞篷帽
G
繁荣
H
骑
J
陷阱
K
汤姆
L
叮当声

我没有尝试运行您的代码。但在释放密钥时，您似乎缺少“重置”步骤。我没有尝试运行您的代码。但在释放钥匙时，您似乎缺少“重置”步骤。