Javascript 单击div以发出声音，同一个div链接到键盘声音。。。可能吗？

我正在做一个鼓点。关键功能是您必须能够单击屏幕上的一个div以产生鼓声。同时，按下发出相同声音的键时，该div应能做出响应

我只能做其中一个。我想知道我所写的当前代码是否具有其他功能

功能播放声音（e）{
const audio=this.document.querySelector（`audio[data key=“${e.keyCode}]”）；
const key=document.querySelector（`.key[data key=“${e.keyCode}]”）；
if（！audio）return；//停止函数的运行
audio.currentTime=0；//倒带到开始位置
音频播放（）；
key.classList.add（'playing'）；
}
功能移除转换（e）{
if（e.propertyName！=='transform'）返回；//如果不是转换，则跳过它
this.classList.remove（'playing'）
}
const keys=document.queryselectoral（'.key'）；
key.forEach（key=>key.addEventListener（'transitionend'，removeTransition））；
window.addEventListener（'keydown'，playSound）
.key{
边框：4倍纯黑；
边界半径：5px；
保证金：1rem；
字体大小：1.4rem；
填充：1rem.5rem；
过渡：所有0.07秒；
宽度：100px；
文本对齐：居中；
颜色：白色；
背景：rgba（0,0,0,0.4）；
文本阴影：0 0 5px黑色；
}
.玩{
转换：比例（1.1）；
边框颜色：黄色；
盒影：0 10px黄色；
}

A.
鼓掌
s
hihat
D
踢
F
敞篷帽
G
繁荣
我会将“单击”事件侦听器添加到您的按键（您已经循环使用的关键元素）中，并将其指定为您的播放声音功能。。。但是，您需要更好地处理playSound功能中的更改。我不会在playSound中限制条件，而是将代码拆分为多个函数

以下是方法：


按键单击功能（e）{
播放声音（例如getAttribute（“数据键”））；
}
功能ON键按下（e）{
播放声音（如按键代码）；
}
播放声音功能（按键代码）{
const audio=document.querySelector（`audio[data key=“${keyCode}]”）；
const key=document.querySelector（`.key[data key=“${keyCode}]”）；
if（！audio）return；//停止函数的运行
audio.currentTime=0；//倒带到开始位置
音频播放（）；
key.classList.add（'playing'）；
}
功能移除转换（e）{
if（e.propertyName！=='transform'）返回；//如果不是转换，则跳过它
this.classList.remove（'playing'）
}
const keys=document.queryselectoral（'.key'）；
keys.forEach（key=>{
key.addEventListener（'transitionend'，removeTransition）；
key.addEventListener（'click'，function（）{
onKeyClicked（键）
});
});
window.addEventListener（'keydown'，onKeyPressed）
.key{
边框：4倍纯黑；
边界半径：5px；
保证金：1rem；
字体大小：1.4rem；
填充：1rem.5rem；
过渡：所有0.07秒；
宽度：100px；
文本对齐：居中；
颜色：白色；
背景：rgba（0,0,0,0.4）；
文本阴影：0 0 5px黑色；
}
.玩{
转换：比例（1.1）；
边框颜色：黄色；
盒影：0 10px黄色；
}

A.
鼓掌
s
hihat
D
踢
F
敞篷帽
G
繁荣
添加点击事件，读取数据属性，你能告诉我这是什么样子吗？我不确定“读取数据属性”是什么意思
data key=“70”
属性如何执行？你怎么能把它包括在我目前的设置中？我必须创建一个新函数吗？