Access to "media keys" from within a browser tab

The answer from Thakis appears to be the most current.

Outdated Answer from a decade ago:

Here's a list of key codes from Microsoft; they include keys such as "VK_VOLUME_MUTE". The key code for VK_VOLUME_MUTE is listed as 0xAD. 0xAD is decimal is 173.

And sure enough, when I load the following and hit the mute button on my keyboard, the key code reported is 173. So they do work like any other key; it wouldn't surprise me, though, if the key codes are Windows-specific. It may take some experimenting.

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(document).keydown(function(ev){
       alert(ev.keyCode);
    });
});
</script>

</body>
</html>

As of Chrome 73, there's explicit support for media keys, see https://developers.google.com/web/updates/2019/02/chrome-73-media-updates

In summary, you can install an event handler with

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

The document above gives a good overview.

https://googlechrome.github.io/samples/media-session/ has example code and a demo.

https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API has more detailed documentation.

Tags:

Javascript

Browser

Google Chrome

Recent Posts