Javascript 在vue.js中检测键盘按钮并播放声音

下面的代码实际上会在使用vue.js单击每个按钮时播放声音

当DOM就绪而不是单击按钮时，如何检测键盘按下和播放声音

例如，在输入playSound

v-on:keyup.13=“playSound（'path/to/mp3'）”

Vue文档主要解释html属性，我想这可能是需要在JS中完成的事情。我是Vue.js的新手

Vue.js文档

看

---

当您按下某个键时，键盘事件将从中激发并向上冒泡。因此，如果您想处理所有按键，而不管哪个元素具有焦点，那么您需要在上的代码中手动注册侦听器，例如

newvue({
el:“#应用程序”，
创建（）{
this.onKeyDown=this.onKeyDown.bind（this）；
document.addEventListener（'keydown'，this.onKeyDown）；
},
销毁（）{
document.removeEventListener（'keydown'，this.onKeyDown）；
},
方法：{
播放声音（声音）{
如果（声音）{
var audio=新音频（声音）；
音频播放（）；
}
},
onKeyDown（e）{
开关（如钥匙代码）{
案例65：此.playSound（sound1）；break；/“a”键
案例66：此.播放声音（sound2）；中断；/“b”键
}
},
}
});

---

如何找到按键值？为什么这不起作用<代码>A的ASCII值为65。

keyCode

唯一地表示按下的键，而不是它将产生的可打印字符（也就是说，

a

和

a

都具有相同的键代码，因为它是相同的键）。在JavaScript中处理键盘事件时有很多细微差别，我在这里不详细介绍，但您可以阅读MDN了解更多信息，或者询问有关StackOverflow的另一个问题。不区分可打印字符。一个注释。这有点慢，因为每次请求都需要下载声音。即使每个声音小于40 kbs，heroku上的每个请求也会有95 ms的延迟。如果要绘制多个按钮实例，并且每个按钮都需要一个特定键的侦听器，那么添加一组开关盒是否是实现这一点的最佳方法？

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    }
  }
});