Javascript实现打鼓效果

本文实例为大家分享了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: 100vh;
     align-items: center;
     justify-content: center;
}
.key {
     border: .4rem solid black;
     border-radius: .5rem;
     margin: 1rem;
     font-size: 1.5rem;
     padding: 1rem .5rem;
     transITion: all .07s ease;
     width: 10rem;
     text-align: center;
     color: white;
     background: rgba(0,0,0,0.4);
     text-shadow: 0 0 .5rem black;
}
.playing {
     transform: scale(1.1);
     border-color: #ffc600;
     box-shadow: 0 0 1rem #ffc600;
}
kbd {
     display: block;
     font-size: 4rem;
}
.sound {
     font-size: 1.2rem;
     text-transform: uppercase;
     letter-spacing: .1rem;
     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对应图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS实现点击掉落特效

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！