本文實例為大家分享了Javascript實現(xiàn)打鼓效果的具體代碼，供大家參考，具體內(nèi)容如下

按住響應(yīng)的鍵盤顯示不同的聲音

<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='http://www.piao2010.com/bcjs/sounds/clap.wav'></audio> <audio data-key='83' src='http://www.piao2010.com/bcjs/sounds/hihat.wav'></audio> <audio data-key='68' src='http://www.piao2010.com/bcjs/sounds/kick.wav'></audio> <audio data-key='70' src='http://www.piao2010.com/bcjs/sounds/openhat.wav'></audio> <audio data-key='71' src='http://www.piao2010.com/bcjs/sounds/boom.wav'></audio> <audio data-key='72' src='http://www.piao2010.com/bcjs/sounds/ride.wav'></audio> <audio data-key='74' src='http://www.piao2010.com/bcjs/sounds/snare.wav'></audio> <audio data-key='75' src='http://www.piao2010.com/bcjs/sounds/tom.wav'></audio> <audio data-key='76' src='http://www.piao2010.com/bcjs/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;}

第一步實現(xiàn)按下鍵盤實現(xiàn)，聲音的播放

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對應(yīng)圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。