Capture media key events in a browser

Question

Many keyboards have media control keys on them these days: Play/Pause, Next, Previous, etc.

I'm not talking about F1-F12 keys here, btw

Is it possible to capture and react to keypresses on these media keys in webpage in a browser? My rudimentary tests show that they don't fire the keypress event on the window object.

A built-in solution would obviously be great, but for my situation, even an extension would be ok. Is it possible to write a Firefox/Chrome plugin that would do this?

Answer 1

Currently, some browsers has Media Session API to handle some of the Media key events.

navigator.mediaSession.setActionHandler('play', function() { /* Do something */ });
navigator.mediaSession.setActionHandler('pause', function() { /* Do something */ });
navigator.mediaSession.setActionHandler('seekbackward', function() { /* Do something */ });
navigator.mediaSession.setActionHandler('seekforward', function() { /* Do something */ });
navigator.mediaSession.setActionHandler('previoustrack', function() { /* Do something */ });
navigator.mediaSession.setActionHandler('nexttrack', function() { /* Do something */ });

The current playback state can be also be accessed using playbackState accessor , ie

navigator.mediaSession.playbackState; //"paused" or "playing"

Answer 2

是的，它是可行的，并且已经完成了http://smus.com/chrome-media-keys/也许他会和你分享源代码