javascript - 如何将键盘快捷键绑定(bind)到html音频元素的播放和暂停控件

这是我认为应该起作用的方法，但并非如此。我正在使用Unicode 112的“p”键和115的“s”键。

var audio = document.getElementById("lessonTrack");
window.addEventListener("keypress", playPauseKb, false);

function playPauseKb() {
  var x = event.keycode;
  if (x == 112) {
    audio.play();
  }
  else if (x == 115) {
    audio.pause();
  }
}

最佳答案

你有正确的主意。我添加了一些调试步骤，以后可以使用这些步骤来帮助您排除代码故障。您只需要删除注释即可进行测试。我还向您的函数添加了缺少的事件参数。我将事件更改为按键，但是您可以选择使用另一个事件，但是某些键盘按钮将不响应按键事件。

您还应该尝试尽量避免使用===而不是==的习惯，这将有助于防止将来出现某些错误。 ==运算符将匹配值，但是===运算符将匹配值和类型。如果要确保您的值是字符串，数字等，这可能是个问题。

更新:您可能希望使用以下代码行代替原始行来检查firefox中的按键事件，因为它将为event.keyCode返回0。

//check to see which event property is supported
var x = event.which || event.keyCode;

JavaScript:

var audio = document.getElementById("lessonTrack");

window.addEventListener("keyup", playPauseKb, false);

function playPauseKb(event) {//<-- added missing event parameter


  var x = event.keyCode;

  //debug
  //console.log(x);

  //p on the keyboard
  if (x === 80) {

    audio.play();

    //alert("playing");

  } else if (x === 83) { //s button keycode

    audio.pause();

    //alert("paused");

  }
}