02-21 12:55 阅读 169

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对应图

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