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

Question

This is what I thought should work but it doesn't. I'm am using unicode 112 for the "p" key and 115 for "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();
  }
}

Answer 1

Update:

Mozilla tells us to use event.key because event.charCode and event.which are depreciated. Yet, this is misleading as event.key is only used in newer versions of Firefox and IE. Chrome, Opera, and perhaps others do not support it. Actually, event.which appears to be the most widely supported. So, per Larry Lane's answer, we should continue to use:

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

It's also important to know that keypress may return a different char code than keydown and keypress. For example, pressing "p" will return 112 ("p") in keypress and 80 ("P") in keydown/keyup. So use keypress when trying to capture the actual char. Use keydown/keyup when you need to capture special keys like alt, ctrl, shift, etc.

I've updated the demo code to better illustrate the differences.

Original:

The most important point for OP is to include the event parameter in the handler function. If omitted, as in the original code, none of the solutions here will work.

Also, both keyCode and charCode are depreciated and only worked with the keypress event. OP should instead use event.key which returns a character and use event.key.charCodeAt(0) to get the code if that is required.

Here is a snippet to show the various keyboard events:

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

Answer 2

You had the right idea. I added some debugging steps that you can take in the future to help you trouble shoot your code. You just have to remove the comments for testing. I also added the missing event parameter to your function. I changed the event to keyup but you can use another event if you choose, however some keyboard buttons will not respond to key down events.

You should also try and get in the habbit of using === instead of == when you can it will help prevent some possible bugs in the future. The == operator will match the value but the === operator will match the value and type. This can be a problem if you want to make sure your value is a string,number,etc.

Update: You might want use the following line of code in place of the original line to check for keypress events in firefox because it will 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

Try the following: Looks like you have the wrong call to keyCode, javascript is case sensitive so keycode is not the same as 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();
}
});