JS Drum Kit 爵士鼓 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript30 Day 1: JS Drum Kit</title>  <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Poppins:400,600'); html { font-size: 10px; background: -webkit-linear-gradient(to top, #1a284f 0%, #2b1b37 100%); background: -moz-gradient(to top, #1a284f 0%, #2b1b37 100%); background: linear-gradient(to top, #1a284f 0%, #2b1b37 100%); } html, body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; font-weight: 400; width: 100vw; height: 100vh; } .keys { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-content: center; align-content: center; } .key { border: .2rem solid #3697ca; border-radius: .8rem; margin: 1rem; font-size: 1.5rem; padding: 1rem .5rem; transition: all .07s ease; width: 10rem; text-align: center; color: #fff; background: transparent; } .playing { transform: scale(1.1); border-color: #7adcff; box-shadow: 0 0 1rem #7adcff; background: rgba(255,255,255,0.05); } .playing .sound { color: #7adcff; } kbd { display: block; font-size: 4rem; font-family: 'Poppins', sans-serif; font-weight: 600; } .sound { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .1rem; color: #3697ca; } .tip{margin: 30px;text-align: center;font-size: 20px;color: #fff;} </style> } </head> <body> <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> <div class="keys"> <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> <div class="keys"> <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> <p class="tip">请等声音加载完</p> <audio data-key="65" src="http://katherinekato.com/misc/clap.wav"></audio> <audio data-key="83" src="http://katherinekato.com/misc/hihat.wav"></audio> <audio data-key="68" src="http://katherinekato.com/misc/kick.wav"></audio> <audio data-key="70" src="http://katherinekato.com/misc/openhat.wav"></audio> <audio data-key="71" src="http://katherinekato.com/misc/boom.wav"></audio> <audio data-key="72" src="http://katherinekato.com/misc/ride.wav"></audio> <audio data-key="74" src="http://katherinekato.com/misc/snare.wav"></audio> <audio data-key="75" src="http://katherinekato.com/misc/tom.wav"></audio> <audio data-key="76" src="http://katherinekato.com/misc/tink.wav"></audio> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function(){ $('.tip').text('数据加载完成!'); }; </script> <script type="text/javascript"> function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList.add('playing'); } function removeTransition(e) { if (e.propertyName !== 'transform') return; this.classList.remove('playing'); } const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('transitionend', removeTransition)); window.addEventListener('keydown', playSound); window.addEventListener('mousedown', playSound); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » JS Drum Kit 爵士鼓