Global keyboard bindings to control your Chrome-based music player. Allows your keyboard media keys (play/pause, next, previous) to work when you're listening to music on various streaming websites.
Keyboard shortcuts
to give Keysocket 'Global' permissions
Keyboard shortcuts
Keysocket Media Keys
and change each desired key to Global
Keysocket also provides an API that websites can use to bind their players without the need to wait for their PR to be accepted and released in the Chrome Webstore extension. Keysocket fires events for each media key, which the website can add event listeners for. Below is an example from http://www.relax-hub.com, written by the current project maintainer, Feedbee:
// Web Page Media Control API interaction (v0.4)
// https://github.com/feedbee/web-page-media-control-api-spec
// for Key Socket Media Keys Chrome extension
// https://chrome.google.com/webstore/detail/key-socket-media-keys/fphfgdknbpakeedbaenojjdcdoajihik?hl=en
document.addEventListener("MediaPlayPause", function () {
playerCollection.send("toggle");
});
document.addEventListener("MediaStop", function () {
playerCollection.send("stop");
});
document.addEventListener("MediaPrev", function () {
var player = playerCollection.getPrevPlayer();
if (player) {
player.send("play");
}
});
document.addEventListener("MediaNext", function () {
var player = playerCollection.getNextPlayer();
if (player) {
player.send("play");
}
});
Web Page Media Control API documentation is available here.
Plugin creation is simple. If you have found a website with media content, that isn't supported by keysocket, just write a plugin by yourself and create new Pull Request to share it with others. How to do it?
First of all, determine the fixed part of website's URL, where a media content is shown. In extension/manifest.json
add an item into content_scripts
array like this:
{
"matches": ["*://example.com/player*"],
"js": ["plugin-api.js", "keysocket-example-service-name.js"]
},
Create new file into extension
folder using the pattern keysocket-example-service-name.js
(use your service name to
replace example-service-name
part). Write plugin's code there. Check other plugins for examples.
Typically, plugin can interact with a player using either button press simulation or public API call. The second option implies you writing custom JS code to talk to player, while the first one requires just to mention DOM selectors to configure keysocket.
keySocket.init('example-service-name', {
"play-pause": '...',
"prev": '...',
"next": '...',
"stop": '...'
});
In the code above two arguments were passed to keySocket.init
function. The first argument is a plugin name, it used for
logging and can be anything you want. The second argument is a map used to bind keysocket events (which is caused by
user pressing control keys) to buttons or code, that handles this event. The events are play-pause
, prev
, next
and stop
. Any of them can be omitted in the map.
So, passing a function as an event handler, you set the code, that will be called when event is thrown. Passing anything else, which expected to be a string, you define DOM selector to look up for a DOM object to simulate click on it.
Different websites require different approaches to dial with them. So, make a research to find the best solution in
your case. Look through the other plugins (extension/keysocket-*.js
files) for the reference.