javascript中未定义音频标记错误

我是用Javascript写的。当我运行

e.keycode==16

事件侦听器时，它会说音频没有定义，即使我已经将音频定义为已经播放的声音。

您应该全局声明

音频和
键

您的代码：

window.addEventListener("keydown",function(e){    // window is an object in the js which has all the global functions and variables as its methods and properties
    console.log(e);                                // window object represents the browser's window
    console.log(e.keyCode);                        // keycode is a function in keybooard event for representing the keycode of that particular key pressed
    const audio=document.querySelector(`audio[data-key="${e.keyCode}"]`)  // this catches the particular element of audio tag which has the data key of pressed button
    const key=document.querySelector(`.key[data-key="${e.keyCode}"]`)
    console.log(audio) 
    console.log(key) 
    if(!audio)    // if we press the key other than M,U,S,I,C
    {
        return;
    } 
    audio.currentTime=0;  // this attribute will help to play the audio from the time alloted on rhs after hitting the button

    audio.play()    // if we would not have put the current time then the sound will not come again as the previous sound is already been played 
    key.classList.add('playing')     // this is made to add playing class into the key class, when we press the button
})
    function removetransition(e)
    {
      console.log(e)
      if(e.propertyName!=="transform")   // we are taking only the transform propety from all the transition properties
      {
          return;
      }
      console.log(e.propertyName)       // this will be printed when the transition will be ended
      this.classList.remove("playing")
    }
    const keys=document.querySelectorAll(".key")
    keys.forEach(key =>key.addEventListener("transitionend",removetransition)); 
    // this function will give all the transition that are associated with the function in which the transitionend listner is added, and then by function definition we can remove it                                       
    // a bunch of things will be transitioned so it will give all the transition and then we can select which one we can remove
    window.addEventListener("keydown",function(e){
        if(e.keyCode==16)
        {
            audio.pause();
            key.classList.remove("playing")
        }

    })  

工作解决方案：

window.addEventListener("keydown", function (e) {
    console.log(e);
    console.log(e.keyCode);                        
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
    console.log(audio)
    console.log(key)
    if (!audio)
    {
        return;
    }
    audio.currentTime = 0;
    audio.play()
    key.classList.add('playing')
})

编辑：由于您覆盖了
向下键
功能，因此应执行以下操作：

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)

window.addEventListener("keydown", function (e) {
    console.log(e);
    console.log(e.keyCode);                        
    console.log(audio)
    console.log(key)
    if (!audio)
    {
        return;
    }
    audio.currentTime = 0;
    audio.play()
    key.classList.add('playing')
})

请分享更多详细信息，例如代码的可运行示例和确切的错误消息。另外，请解释这与CSS的关系，或者删除它tag@kmoser你确定？至少有一个定义：
const audio=document.querySelector（`audio[data key=“${e.keyCode}]”）
我刚刚删除了我的评论，因为我看到了它。但我没有看到任何HTML，所以很难说它是否真的选择了任何东西。为什么要添加两个按键事件处理程序？第二个无法访问第一个处理程序中定义的
audio
常量。@AryanPandey请包含相关HTML。
window.addEventListener("keydown",function(e){
    console.log(e);
    console.log(e.keyCode);
    const audio=document.querySelector(`audio[data-key="${e.keyCode}"]`) 
    const key=document.querySelector(`.key[data-key="${e.keyCode}"]`)
    console.log(audio) 
    console.log(key) 
    if(!audio)
    {
        return;
    } 
    audio.currentTime=0;
    audio.play()
    key.classList.add('playing')
    if(e.keyCode==16)
    {
       audio.pause();
       key.classList.remove("playing")
    }
})
    function removetransition(e)
    {
      console.log(e)
      if(e.propertyName!=="transform")
      {
          return;
      }
      console.log(e.propertyName)
      this.classList.remove("playing")
    }
    const keys=document.querySelectorAll(".key")
    keys.forEach(key =>key.addEventListener("transitionend",removetransition));