Javascript：在按键下更改图像并播放音频

我正在制作一个音板页面，我让它播放音频，并在单击图像时更改图像。但是，当按下特定的按键代码时，我也尝试更改图像

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 65) {
    document.getElementById('myTune10').play();
  }
});

这是图像更改的css。我试图在单击keyCode时使用右侧ThereOhkaye.jpg图像

button:active, .buttontwo:active {
background:url(images/RightDereOhkaye.jpg) no-repeat;

试一试

替换。。。使用您要更新图像的元素Id

注意：

keydown

仅跟踪密钥本身，而不是密钥的状态。 因此，如果按键盘上的键，

KeyDown

生成按键的按键代码。a如果按 shift+a您还可以得到一个键码。所以 认识到 shift+a和a，您必须使用

按键

而不是

按键

事实上，当音频播放时，您需要更改背景图像 玩。因此，当按下一个键时，不需要更改它。 您可以创建在keypree上播放音频的功能，并更改 播放音频时的背景

请参见下面的代码片段：

var player=document.getElementById（'myTune10'），
button=document.getElementById（'button'）；
/*按“A”键时播放/暂停*/
文档.添加的文本列表器（'keypress'，函数（e）{
var char=e.which | e.keyCode；
如果（char==65）按钮。单击（）
} )
/*添加“单击事件以播放”按钮*/
addEventListener（'click'，function（）{
（player.pause）？player.play（）：player.pause（）
} )
/*在播放音频时添加类并更改图像*/
player.addEventListener（'play'，function（）{
button.classList.add（'pause'）
} )
/*删除类并在音频暂停时更改图像*/
player.addEventListener（'pause'，function（）{
button.classList.remove（'pause'）
} )
/*当前帧的数据可用并加载时显示内容*/
player.addEventListener（'loadeddata'，function（）{
document.getElementById（'player'）.style.display='block'
}）

#播放器{
显示：无
}
.玩{
宽度：48px；
高度：40px；
边框：1px实心#ccc；
边界半径：5px；
背景：#eee url(https://www.w3.org/TR/WWWicn/play-start.gif)中-中-中-中-不重复
}
.暂停{
背景图片：url(https://www.w3.org/TR/WWWicn/play-pause.gif)
}

单击此处并按&ldquo；A&ldquo；（大写）播放/暂停。

你为什么不在互联网上搜索如何使用JavaScript更改背景图像？Alex S我试过了，但没有成功。下面是我如何更新代码的：if（e.keyCode==65）{document.getElementById（'myTune10'）.play（）；document.getElementById（'myTune10'）。style.background='url（“images/rightTheerohkaye.jpg”）no repeat'；}images/是当前页面url的相对路径。尝试使用图像的绝对url，从http://...

document.getElementById(...).style.background = 'url(images/RightThereOhkaye.jpg) no-repeat';