Dram Kit
data-key
div ์์ฑ์ค data-key ๋ ์ด๋ค ํค๋ฅผ ๋๋ฌ์ ์คํ ์ํฌ์ ์๋์ง ์ค์ ํ๋ ๊ฒ์ด๋ค. http://keycode.info/ ์์ ๊ฐ ํค์ ํค์ฝ๋๋ฅผ ์ ์ ์๋ค.
function palySound(e){
// console.log(e.keyCode); ๋๋ฅธ key: "a" keyCode๋ฅผ ๋ณผ์ ์์
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return; // ์์ ์๋ data-key๊ฐ ์๋๋๋ผ๋ null์ด ๋จ์ง ์๊ณ ์คํ์์ผ์ฃผ๊ฒํจ
audio.currentTime = 0; //์๋กญ๊ฒ ์์ ํ ์ ์๊ฒํจ
audio.play();
key.classList.add('playing');
}
function removeTransition(e){
if(e.propertyName !=='transform') return; // transfrom ์ด์๋๊ฒ์ ์คํ๋์ง ์๊ฒ ํด์ค
this.classList.remove('playing') // ๋๋ฅด๊ณ playing ์ ์ค์ ํ๋งํผ ์ ๋๋ฉ์ด์
์ด ๋ ํ์ ์ฌ๋ผ์ง๊ฒ ํด์ฃผ๋
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown',palySound);

Last updated
Was this helpful?