按鍵播放聲音 - JavaScript

Question

我不知道我的代碼有什么問題，當我按下按鍵時聲音沒有播放。

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;
    }

}

Answer 1

您的

發出聲音（事件，鍵）；

正在傳遞事件，並且 makesound 需要一個鍵作為第一個參數

我建議您委托並使用查找表

 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>

Answer 2

使用 makesound(event.key); 這將調用您的關鍵參數 function