nickf
nickf

Reputation: 546035

Capture media key events in a browser

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

Media keys

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?

Upvotes: 4

Views: 2085

Answers (2)

EwyynTomato
EwyynTomato

Reputation: 4077

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, i.e.

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

Upvotes: 2

Valentin
Valentin

Reputation: 2858

Yes, it is doable and has already been done http://smus.com/chrome-media-keys/ Maybe he'll share the source code with you

Upvotes: 1

Related Questions