核心代码:
& lt; script>
函数removeTransition(事件){
如果事件。propertyName !==氨浠弧?返回;//过滤其中一种事件
event.target.classList.remove(“玩”);//移除高亮的样式
}
函数playSound(事件){
const音频=document.querySelector(“音频(数据键=" $ {event.keyCode} ") ");//根据触发按键的键码,获取对应音频
const关键=document.querySelector (“div[数据键=" $ {event.keyCode} ") ");//获取页面对应按钮DIV元素
如果(音频)返回;//处理无效的按键事件
key.classList.add(“玩”);//改变样式
音频。currentTime=0;//每次播放之后都使音频播放进度归零
audio.play ();//播放相应音效
}
const键=Array.from (document.querySelectorAll ('。key '));//获取页面所有按钮元素
钥匙。forEach(关键=比;关键。addEventListener (transitionend, removeTransition));//添加过渡事件监听
窗口。addEventListener (keydown, playSound);
& lt;/script>
中文版本完整代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> JS鼓Kit
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/style.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; div类="钥匙"比;
& lt; div数据键=?5”class=肮丶北?
& lt; kbd> A
& lt;跨类="声音"祝辞clap
& lt;/div>
& lt; div数据键=?3”class=肮丶北?
& lt; kbd> S
& lt;跨类="声音"祝辞hihat
& lt;/div>
& lt; div数据键=?8”class=肮丶北?
& lt; kbd> D
& lt;跨类="声音"祝辞kick
& lt;/div>
& lt; div数据键=?0”class=肮丶北?
& lt; kbd> F
& lt;跨类="声音"祝辞openhat
& lt;/div>
& lt; div数据键=?1”class=肮丶北?
& lt; kbd> G
& lt;跨类="声音"祝辞boom
& lt;/div>
& lt; div数据键=?2”class=肮丶北?
& lt; kbd> H
& lt;跨类="声音"祝辞ride
& lt;/div>
& lt; div数据键=?4”class=肮丶北?
& lt; kbd> J
& lt;跨类="声音"祝辞snare
& lt;/div>
& lt; div数据键=?5”class=肮丶北?
& lt; kbd> K
& lt;跨类="声音"祝辞tom
& lt;/div>
& lt; div数据键=?6”class=肮丶北?
& lt; kbd> L
& lt;跨类="声音"祝辞tink
& lt;/div>
& lt;/div>
& lt;音频数据键=" 65 " src=" https://www.yisu.com/zixun/sounds/clap.wav "祝辞& lt;/audio>
& lt;音频数据键=" 83 " src=" https://www.yisu.com/zixun/sounds/hihat.wav "祝辞& lt;/audio>
& lt;音频数据键=" 68 " src=" https://www.yisu.com/zixun/sounds/kick.wav "祝辞& lt;/audio>
& lt;音频数据键=" 70 " src=" https://www.yisu.com/zixun/sounds/openhat.wav "祝辞& lt;/audio>
& lt;音频数据键=" 71 " src=" https://www.yisu.com/zixun/sounds/boom.wav "祝辞& lt;/audio>
& lt;音频数据键=" 72 " src=" https://www.yisu.com/zixun/sounds/ride.wav "祝辞& lt;/audio>
& lt;音频数据键=" 74 " src=" https://www.yisu.com/zixun/sounds/snare.wav "祝辞& lt;/audio>
& lt;音频数据键=" 75 " src=" https://www.yisu.com/zixun/sounds/tom.wav "祝辞& lt;/audio>
& lt;音频数据键=" 76 " src=" https://www.yisu.com/zixun/sounds/tink.wav "祝辞& lt;/audio>
& lt; script>
函数removeTransition(事件){
如果事件。propertyName !==氨浠弧?返回;//过滤其中一种事件
event.target.classList.remove(“玩”);//移除高亮的样式
}
函数playSound(事件){
const音频=document.querySelector(“音频(数据键=" $ {event.keyCode} ") ");//根据触发按键的键码,获取对应音频
const关键=document.querySelector (“div[数据键=" $ {event.keyCode} ") ");//获取页面对应按钮DIV元素
如果(音频)返回;//处理无效的按键事件
key.classList.add(“玩”);//改变样式
音频。currentTime=0;//每次播放之后都使音频播放进度归零
audio.play ();//播放相应音效
}
const键=Array.from (document.querySelectorAll ('。key '));//获取页面所有按钮元素
钥匙。forEach(关键=比;关键。addEventListener (transitionend, removeTransition));//添加过渡事件监听
窗口。addEventListener (keydown, playSound);
& lt;/script>
& lt;/body>
& lt;/html>
