时间戳

首页 > 解决方案 > 在 vue.js 中检测键盘按钮并播放声音

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

问题描述

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

当 DOM 准备好而不是单击按钮时，如何检测键盘按下和播放声音？

例如在输入播放声音时v-on:keyup.13="playSound('path/to/mp3')"

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

关于事件修饰符的 Vue.js 文档

请参阅代码笔。

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

标签： javascriptvue.jsvuejs2

解决方案

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

new Vue({
  el: '#app',
  created() {
    this.onKeyDown = this.onKeyDown.bind(this);
    document.addEventListener('keydown', this.onKeyDown);
  },
  destroyed() {
    document.removeEventListener('keydown', this.onKeyDown);
  },
  methods: {
    playSound (sound) {
      if(sound) {
        var audio = new Audio(sound);
        audio.play();
      }
    },
    onKeyDown(e) {
      switch (e.keyCode) {
        case 65: this.playSound(sound1); break; // 'a' key
        case 66: this.playSound(sound2); break; // 'b' key
      }
    },
  }
});

密码笔

推荐阅读