I don't know what is wrong with my code the sound is not playing when I am pressing the keys.
for(var i=0;i<document.querySelectorAll(".drum").length;i++)
{
document.querySelectorAll("button")[i].addEventListener("click",function() {
var buttoninnerhtml = this.innerHTML;
makesound(buttoninnerhtml);
});
}
document.addEventListener("keydown",function(event){
makesound(event,key);
});
function makesound(key)
{
switch (key) {
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;
}
}
Your
makesound(event,key);
is passing the event and the makesound expects a key as first parameter
I suggest you delegate and use a lookup table
const sounds = {
'KeyW': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/tom1.ogg',
'KeyA': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/tom2.ogg',
'KeyS': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/tom3.ogg',
'KeyD': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/pad1.ogg',
'KeyJ': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/snare1.ogg',
'KeyK': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/crash1.ogg',
'KeyL': 'https://www.virtualdrumming.com/drums/virtual-drum-sounds/hip-hop/kik.ogg'
}
const play = sound => {
console.log("playing",sound)
var audio = new Audio(sound);
audio.play();
}
document.getElementById('drumSet').addEventListener('click', function(e) {
const tgt = e.target.closest('button');
if (tgt) play(sounds[tgt.id])
})
window.addEventListener('keypress', function(e) { console.log(e.code)
if (sounds[e.code]) {
console.log("clicking",e.code)
document.getElementById(e.code).click()
}
})<div id="drumSet">
<button id="KeyW">Tom 1</button>
<button id="KeyA">Tom 2</button>
<button id="KeyS">Tom 3</button>
<button id="KeyD">Tom 4</button>
<button id="KeyJ">Snare</button>
<button id="KeyK">Crash</button>
<button id="KeyL">Kick-bass</button>
</div>