Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access to "media keys" from within a browser tab

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)">     <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
like image 886
jldupont Avatar asked Sep 02 '10 18:09

jldupont


People also ask

How do I access my media key?

Using your media keys should be simple: Just press them. For example, if you're playing a YouTube video and it's hidden in a background tab somewhere, you can press the Play/Pause key on your keyboard to pause it and press the key again to resume it.

How do I stop Chrome from hijacking my media keys?

For this case, in the Chrome address bar, type chrome://flags , and search for "key", or just copy this link into Chrome: chrome://flags/#hardware-media-key-handling. You'll see the hidden Hardware Media Key Handling option. Set this to Disabled.

How do I control media on my keyboard?

Ctrl + Shift + Alt + ← sends Volume Down. Ctrl + Shift + Alt + ↓ sends Mute. Ctrl + Shift + Alt + → sends Volume Up.


2 Answers

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.

like image 102
thakis Avatar answered Oct 12 '22 04:10

thakis


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> 
like image 20
Jacob Mattison Avatar answered Oct 12 '22 05:10

Jacob Mattison