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实现点击掉落特效