Как привязать сочетание клавиш к элементам управления воспроизведением и паузой аудиоэлемента 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();
  }
}

Источник

3 ответа

Решение

У тебя была правильная идея. Я добавил несколько шагов отладки, которые вы можете предпринять в будущем, чтобы помочь вам решить проблему с кодом. Вы просто должны удалить комментарии для тестирования. Я также добавил отсутствующий параметр события в вашу функцию. Я изменил событие на keyup, но вы можете использовать другое событие, если хотите, однако некоторые кнопки клавиатуры не будут реагировать на события нажатия клавиши.

Вы также должны попытаться освоить использование === вместо == когда это возможно, это поможет предотвратить возможные ошибки в будущем. == Оператор будет соответствовать значению, но === Оператор будет соответствовать значению и типу. Это может быть проблемой, если вы хотите убедиться, что ваше значение представляет собой строку, число и т. Д.

Обновление: вы можете захотеть использовать следующую строку кода вместо исходной строки для проверки событий нажатия клавиш в Firefox, потому что она вернет 0 для 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");

  }
}
Источник

Попробуйте сделать следующее: похоже, у вас неправильный вызов keyCode, javascript чувствителен к регистру, поэтому код ключа не совпадает с 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();
}
});
Источник

Обновить:

Mozilla говорит нам использовать event.key, потому что event.charCode и event.which устарели. Тем не менее, это вводит в заблуждение, так как event.key используется только в новых версиях Firefox и IE. Chrome, Opera и, возможно, другие не поддерживают его. На самом деле, event.which является наиболее широко поддерживаемым. Итак, согласно ответу Ларри Лейна, мы должны продолжать использовать:

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

Также важно знать, что нажатие клавиши может возвращать код символа, отличный от нажатия клавиши и нажатия клавиши. Например, нажатие "p" вернет 112 ("p") при нажатии клавиш и 80 ("P") при нажатии клавиш. Так что используйте нажатие клавиш, когда пытаетесь захватить фактический символ. Используйте keydown/keyup, когда вам нужно захватить специальные клавиши, такие как alt, ctrl, shift и т. Д.

Я обновил демонстрационный код, чтобы лучше проиллюстрировать различия.

Оригинал:

Наиболее важным моментом для OP является включение параметра события в функцию обработчика. Если опущено, как в исходном коде, ни одно из решений здесь не будет работать.

Кроме того, и keyCode, и charCode устарели и работают только с событием нажатия клавиши. Вместо этого OP должен использовать event.key, который возвращает символ, и использовать 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

Источник
Другие вопросы по тегам