Javascript30 Day1:Drum Kit

The code is from Katherine Kato on Codepen.

HTML

9 keys:asd ,fgh,jkl , grouped in the div.

and also the <audio> for the related data-key and src.

CSS

when key down the keyboard, add the class “playing”

JS

When event listen “keydown”, run playSound()

window.addEventListener(‘keydown’, playSound);

And the function playSound is running:

select the audio and key of the selected one, according to the data-key.

when console.log(e),

the keyCode is for the different keyboard buttons.

if (!audio) return;stop the function from all running together