JavaScript 30 Day -- 01 JavaScript Drum Kit

模拟一个打鼓的页面。用户在键盘上按下几个键时，页面上与字母对应的按钮变大变亮，对应的鼓点声音响起来。

键盘事件-监听(addEventListener)  当按下键盘的时候
触发 transitionend 必须要有transition transform这两个css属性
获取对应的键document.querySelector(`audio[data-key="${e.keyCode}"]`);

<div>
<ul>
<li data-key='65'>A</li>
<li data-key='83'>S</li>
<li data-key='68'>D</li>
<li data-key='70'>F</li>
<li data-key='71'>G</li>
<li data-key='72'>H</li>
<li data-key='74'>J</li>
<li data-key='75'>K</li>
<li data-key='76'>L</li>
</ul>
</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>

window.addEventListener('keydown', function(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`li[data-key="${e.keyCode}"]`);

if (!audio) {
return;
}

audio.currentTime = 0;
// console.log(key);
// console.log(audio);
// console.log(e.keyCode);

audio.play();

key.classList.add("playing");
// key.classList.remove("playing");
// key.classList.toggle("playing");
});

function foo(event) {
if (event.propertyName !== 'transform') {
return;
}
console.log(event.propertyName);
this.classList.remove('playing');
// console.log(e.propertyName);
// console.log(1);
}
// alert(removeTransition);
const keys = Array.from(document.querySelectorAll('li'));
keys.forEach(key => key.addEventListener('transitionend',foo));
// console.log(keys);