the keypress event has been deprecated and MDN advice to use beforeinput, keydown, keyup event instead. can you please help me out on to implement according to my question??
so far what i have work. If i press on any key in the keyboard displayed it got display but it need to be triggered by a mouse-leftclick first. how to avoid the clicking mouse and get the code working by any key straight away.
var nbreOfDrum = document.querySelectorAll(".drum");
console.log(nbreOfDrum.length);
for(var i = 0; i< nbreOfDrum.length; i++){
document.querySelectorAll(".drum")[i].addEventListener("keypress",function(e){
console.log(e.key);
var keypressed = e.key;
switch (keypressed) {
case "w":
var audio = new Audio("sounds/tom-1.mp3");
audio.play();
break;
case "a":
var audio = new Audio("sounds/tom-2.mp3");
audio.play();
break;
case "s":
var audio = new Audio("sounds/tom-3.mp3");
audio.play();
break;
case "d":
var audio = new Audio("sounds/tom-4.mp3");
audio.play();
break;
case "j":
var audio = new Audio("sounds/snare.mp3");
audio.play();
break;
case "k":
var audio = new Audio("sounds/crash.mp3");
audio.play();
break;
case "l":
var audio = new Audio("sounds/kick-bass.mp3");
audio.play();
break;
default:
break;
}
})
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum ???? Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<footer>
Made with ❤️ in London.
</footer>
<script src="./index.js"></script>
</body>
</html>