按键播放声音 - JavaScript答案

【问题标题】：Play sound on key press - JavaScript按键播放声音 - JavaScript
【发布时间】：2022-08-05 15:44:17
【问题描述】：

我不知道我的代码有什么问题，当我按下按键时没有播放声音。

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

}

欢迎来到堆栈溢出！访问help center，使用tour 了解内容和How to Ask。请先>>>Search for related topics on SO<<<如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
只有一个事件侦听器并传递预期值。或更好：使用委托 - 甚至不需要切换。只需使用 event.code
您如何调用函数makesound(event, key)，与函数签名function makesound(key) 不匹配。 key 在你的函数中实际上现在将包含 Event 对象。

标签： javascript

【解决方案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>

【讨论】：

【解决方案2】：

使用 makesound(event.key); 这将调用您的关键参数函数

【讨论】：