本文实例为大家分享了Javascript实现打鼓效果的具体代码，供大家参考，具体内容如下
按住响应的键盘显示不同的声音
< div class = "keys" >
< div data-key = "65" class = "key" >
< kbd >A</ kbd >
< span class = "sound" >clap</ span >
</ div >
< div data-key = "83" class = "key" >
< kbd >S</ kbd >
< span class = "sound" >hihat</ span >
</ div >
< div data-key = "68" class = "key" >
< kbd >D</ kbd >
< span class = "sound" >kick</ span >
</ div >
< div data-key = "70" class = "key" >
< kbd >F</ kbd >
< span class = "sound" >openhat</ span >
</ div >
< div data-key = "71" class = "key" >
< kbd >G</ kbd >
< span class = "sound" >boom</ span >
</ div >
< div data-key = "72" class = "key" >
< kbd >H</ kbd >
< span class = "sound" >ride</ span >
</ div >
< div data-key = "74" class = "key" >
< kbd >J</ kbd >
< span class = "sound" >snare</ span >
</ div >
< div data-key = "75" class = "key" >
< kbd >K</ kbd >
< span class = "sound" >tom</ span >
</ div >
< div data-key = "76" class = "key" >
< kbd >L</ kbd >
< span class = "sound" >tink</ span >
</ div >
</ div >
< audio data-key = "65" src = "sounds/clap.wav" ></ audio >
< audio data-key = "83" src = "sounds/hihat.wav" ></ audio >
< audio data-key = "68" src = "sounds/kick.wav" ></ audio >
< audio data-key = "70" src = "sounds/openhat.wav" ></ audio >
< audio data-key = "71" src = "sounds/boom.wav" ></ audio >
< audio data-key = "72" src = "sounds/ride.wav" ></ audio >
< audio data-key = "74" src = "sounds/snare.wav" ></ audio >
< audio data-key = "75" src = "sounds/tom.wav" ></ audio >
< audio data-key = "76" src = "sounds/tink.wav" ></ audio >
css部分：
html {
font-size : 10px ;
background : url ( 'img/background.jpg' ) bottom center ;
background- size : cover;
}
body,html {
margin : 0 ;
padding : 0 ;
font-family : sans-serif ;
}
.keys {
display : flex;
flex: 1 ;
min-height : 100 vh;
align-items: center ;
justify- content : center ;
}
.key {
border : . 4 rem solid black ;
border-radius: . 5 rem;
margin : 1 rem;
font-size : 1.5 rem;
padding : 1 rem . 5 rem;
transition: all . 07 s ease;
width : 10 rem;
text-align : center ;
color : white ;
background : rgba( 0 , 0 , 0 , 0.4 );
text-shadow : 0 0 . 5 rem black ;
}
.playing {
transform: scale( 1.1 );
border-color : #ffc600 ;
box-shadow: 0 0 1 rem #ffc600 ;
}
kbd {
display : block ;
font-size : 4 rem;
}
.sound {
font-size : 1.2 rem;
text-transform : uppercase ;
letter-spacing : . 1 rem;
color : #ffc600 ;
}
第一步实现按下键盘实现，声音的播放
window.addEventListener( "keydown" , function (e){
console.log(e.keyCode);
const audio=document.querySelector(`audio[data-key= "${e.keyCode}" ]`);
const key=document.querySelector(`div[data-key= "${e.keyCode}" ]`)
//每次播放完初始化
if (!audio) return ;
audio.currentTime = 0;
audio.play();
key.classList.add( 'playing' );
setTimeout( function (){
key.classList.remove( 'playing' );
},70);
//按键之后移出效果
})
keyCode对应图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_41309350/article/details/113335998
查看更多关于Javascript实现打鼓效果的详细内容...