Skip to content

Instantly share code, notes, and snippets.

@joelcox
Last active December 23, 2015 13:19
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joelcox/6641424 to your computer and use it in GitHub Desktop.
Save joelcox/6641424 to your computer and use it in GitHub Desktop.
Bind to multimedia keys

Bind to multimedia keys

Web applications are increasingly taking over the functions of native applications. This year has seen an increase of (streaming) audio web applications, such as Rdio, Spotify, Pandora, etc. These applications are long-running applications and provide multimedia to the user, often while the user is doing something else.

Interaction with this type of application works the same as with other applications: the user brings the tab/window in focus and manipulates the application through mouse, keyboard or other input device. Bringing the application into focus is required in order to interact with the application and thus requires the user to get out of the current workflow.

In native applications this problem is fixed by letting applications bind to specific multimedia buttons situated on the keyboard. These buttons serve as a way to interact with the media player without bringing the application into focus. This is currently impossible for web applications for the following reasons:

  1. A window has to be in focus in order to capture a KeyboardEvent.
  2. Multimedia keys won't reach the browser, because multimedia buttons are bound to other media players (e.g iTunes on OS X, even if iTunes isn't running.)

Current workarounds

Boris Smus put some work into a Chrome Extension which inserts a script into each tab, capturing the events and relaying the events to a player. In a later iteration he wrote a small native application which captures the keyboard events and runs a WebSocket server. An accomapanying Chrome Extension runs a WebSocket client which receives these events. The advantage of the latter approach is that the browser doesn't have to be in focus in order to manipulate the player.

Comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment