Access to "media keys" from within a browser tab

开发者 https://www.devze.com 2023-01-14 11:43 出处：网络

Is there a way to access the \"media keys\" with Javascript from within a browser tab/window? I am mainly interested in a google chrome solution.

Is there a way to access the "media keys" with Javascript from within a browser tab/window?

I am mainly interested in a google chrome solution.

Using the following code, there doesn't seem to be an event generated for the media keys:

<html>
<body onKeyDown="showKeyCode(event)开发者_JAVA百科">
    <script type="text/javascript">

        function showKeyCode(event) {
            alert(event.keyCode);
        }

    </script>
</body>
</html>

Am I missing something? Could I do better with a Google Chrome extension??

Update: to address this problem I crafted the following tools:

Chrome MusicMan
Mediakeys Server

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.

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>

Edit: There is now explicit support for media keys. The answer below is deprecated. See @thakis answer below.

Old 2012 answer

Regarding whether you could do better than a Chrome Extension: no you could not - I've made a content script for a site, and running it within the current stable release of Chrome 16 on OS X 10.7. The script is simple enough:

console.log('Content script loading');

$("body").bind("keyup",function(event){
    console.log(event.keyCode);
})

And it shows that no events are triggered for the back, play/pause, forward, mute, volume down or volume up keys.

Interesting the unused F5 key goes generate a keycode, so you could potentially use it as an alternative if you wish.

As it seems, there is now a possibility to execute JS code on media key presses. I took mikemaccana's answer and looked up the KeyEvent:

$(ready);

function ready() {
  $(document).on('keydown', onKeyDown);
}

function onKeyDown(ev) {
  if (ev.code === 'MediaPlayPause') alert('Play/Pause');
  if (ev.code === 'MediaStop') alert('Stop');
  if (ev.code === 'MediaTrackPrevious') alert('Previous Track');
  if (ev.code === 'MediaTrackNext') alert('Next Track');    
  if (ev.code === 'VolumeUp') alert('Volume Up');
  if (ev.code === 'VolumeDown') alert('Volume Down');
  if (ev.code === 'VolumeMute') alert('Volume Mute');
}

You can just do alert(ev.code); in onKeyDown to get the key codes.

I uploaded this example on JSFiddle so you can test it.