当有人点击我想要播放声音时答案

【问题标题】：When somebody clicks a I want sound to be played当有人点击我想要播放声音时
【发布时间】：2019-07-27 14:33:40
【问题描述】：

当我点击 A 键时，我希望播放我的声音，但它似乎不起作用

var key1 = new Audio();
key1.src = "sounds/316898__jaz-the-man-2__do.wav";

var x = document.getElementById("first");
x.addEventListener("keyup", function(event) {
  if (event.keyCode == 65) {
    event.preventDefault();
    key1.play();
  }
})

#first {
  width: 100px;
  height: 100px;
}

&lt;img id="first" src="https://www.mathpages.com/home/piano2.gif"&gt;

【问题讨论】：

什么不起作用？你遇到了什么错误？
@Bergi 声音未播放

标签： javascript

【解决方案1】：

图像并非设计为交互式控件。他们不能（默认情况下）获得焦点。他们也不能有孩子。

这意味着它不能成为焦点，也不能是在您按下 A 时处于焦点的元素的祖先。

将事件处理程序附加到可以成为焦点的对象（或此类对象的祖先），例如 <input> 或 document。

【讨论】：

【解决方案2】：

我尝试将EventListener 附加到window 而不是元素，它可以工作！

var key1 = new Audio();
key1.src = "https://freesound.org/data/previews/316/316913_5385832-lq.mp3";

var x = window; 
x.addEventListener("keyup", function(event) {
  if (event.keyCode == 65) {
    event.preventDefault();
    key1.play();
  }
})

#first {
  width: 100px;
  height: 100px;
}

&lt;img id="first" src="https://www.mathpages.com/home/piano2.gif"&gt;

您也可以尝试将侦听器附加到document 或document.body，它也可以工作。如果您想将其附加到其他一些元素，您可以参考this 问题。

【讨论】：