[英]Play sound on key press - JavaScript
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正在传递事件,并且 makesound 需要一个键作为第一个参数
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>
use makesound(event.key);使用 makesound(event.key); this will call your key parameter function
这将调用您的关键参数 function
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.