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

Question

这是我认为应该起作用的方法，但它不起作用。我正在为 "p" 键使用 unicode 112，为 "s" 使用 115。

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();
  }
}

Answer 1

尝试以下操作：看来您对 keyCode 的调用有误，javascript 区分大小写，因此 keycode 与 keyCode

不同

var audio = document.getElementById("lessonTrack");
window.addEventListener("keydown", function(e) {
var x = e.keyCode;
if (x === 80) { // pressed 'p'
  audio.play();
} else if (x === 83) { // pressed 's'
  audio.pause();
}
});

Answer 2

你的想法是对的。我添加了一些调试步骤，您可以在将来采取这些步骤来帮助您解决代码问题。您只需删除评论以进行测试。我还将缺少的事件参数添加到您的函数中。我将事件更改为 keyup，但如果您愿意，您可以使用其他事件，但是某些键盘按钮不会响应按键事件。

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

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

//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");

  }
}

Answer 3

更新：

Mozilla 告诉我们使用 event.key 因为 event.charCode 和 event.which 已折旧。然而，这是误导性的，因为 event.key 仅用于较新版本的 Firefox 和 IE。 Chrome、Opera，也许其他人不支持它。实际上，event.which 似乎得到了最广泛的支持。因此，根据 Larry Lane 的回答，我们应该继续使用：

var code = event.which || event.charCode;

了解 keypress 可能 return 与 keydown 和 keypress 不同的字符代码也很重要。例如，按 "p" 将 return 112 ("p") in keypress 和 80 ("P") in keydown/keyup。因此，在尝试捕获实际字符时使用按键。当您需要捕获特殊键（如 alt、ctrl、shift 等）时使用 keydown/keyup

我更新了演示代码以更好地说明差异。

原文：

OP最重要的一点是在处理函数中包含事件参数。如果省略，与原始代码一样，此处 none 的解决方案将起作用。

此外，keyCode 和 charCode 都是 depreciated，并且只适用于按键事件。 OP 应该改为使用 event.key，其中 return 是一个字符，并在需要时使用 event.key.charCodeAt(0) 获取代码。

这里是显示各种键盘事件的片段：

document.addEventListener('keypress', function(e) {
  k('keypress-charCode', e.charCode);
  k('keypress-which', e.which);
  k('keypress-key', e.key);
  k('keypress-char', String.fromCharCode(e.charCode || e.which || e.key))
}, false);

document.addEventListener('keydown', function(e) {
  k('keydown-charCode', e.charCode);
  k('keydown-which', e.which);
  k('keydown-key', e.key);
  k('keydown-char', String.fromCharCode(e.charCode || e.which || e.key))
}, false);

document.addEventListener('keyup', function(e) {
  k('keyup-charCode', e.charCode);
  k('keyup-which', e.which);
  k('keyup-key', e.key);
  k('keyup-char', String.fromCharCode(e.charCode || e.which || e.key))
}, false);

k('navigator', 'Navigator: ' + navigator.appName + ' / ' + navigator.appCodeName);


function k(id, value) {
  document.getElementById(id).innerHTML = value || '<i>undefined</i>';
}

body {
  font-family: sans-serif;
  font-size: 16px;
}
table {
  border-collapse: collapse;
  width: 20em;
}
td {
  border: 1px lightgray solid;
  padding: 4px;
}
td i {
  color: red;
}
caption {
  font-weight: bold;
  color: steelblue;
  text-align: left;
}

<div id="navigator"></div>
<br>
<table id="test">
  <tr>
    <td></td>
    <td>charCode</td>
    <td>which</td>
    <td>key</td>
    <td>char</td>
  </tr>
  <tr>
    <td>keypress</td>
    <td id="keypress-charCode"></td>
    <td id="keypress-which"></td>
    <td id="keypress-key"></td>
    <td id="keypress-char"></td>
  </tr>
  <tr>
    <td>keydown</td>
    <td id="keydown-charCode"></td>
    <td id="keydown-which"></td>
    <td id="keydown-key"></td>
    <td id="keydown-char"></td>
  </tr>
  <tr>
    <td>keyup</td>
    <td id="keyup-charCode"></td>
    <td id="keyup-which"></td>
    <td id="keyup-key"></td>
    <td id="keyup-char"></td>

  </tr>
</table>

<p>* press a key to view result

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

How to bind a keyboard shortcut to the play and pause controls of the html audio element

javascript

keyboard-shortcuts

html5-audio