• Stars
    star
    381
  • Rank 112,502 (Top 3 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 13 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

LICENSE Chrome Web Store Chrome Web Store Chrome Web Store github-stars-image

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.

Supported Sites

  • 163 Music
  • 8tracks
  • Amazon Cloud Player
  • Bandcamp
  • Birp
  • Bop
  • Brain.fm
  • Bugs Music
  • Castbox.fm
  • Chrome Built-In Player
  • Comcast/Xfinity
  • Coursera
  • Crunchyroll
  • Deezer
  • Digitally Imported (di.fm)
  • Gaana.com
  • Google Play Music
  • Groove Music
  • HearThis.at
  • Hype Machine
  • iloveradio.de
  • BBC iPlayer
  • Jamendo
  • Jamstash
  • Jango.com
  • Mixcloud
  • Zing MP3
  • Met Opera Season On-Demand
  • Music Choice (untested)
  • Myspace
  • Myzuka.fm
  • Napster
  • Naxos Music Library
  • Netflix
  • Noisli (only without account tested)
  • Noon Pacific (untested)
  • NRK Radio
  • Ok.ru
  • Openload.co
  • Overcast
  • Pandora
  • Phish Tracks
  • Picarto.tv
  • Plex
  • Pluralsight
  • Pocketcasts.com
  • Qobuz
  • Relax-Hub.com
  • Saavn.com
  • Showmax
  • Sirius XM Radio
  • Slacker
  • SomaFM
  • Soundcloud
  • Sowndhaus
  • Spotify
  • Spreaker
  • Streamsquid
  • Subsonic (and Madsonic)
  • Superplayer.fm (untested)
  • Supersport.com
  • Synology Audio Station v.5 (untested)
  • thesixtyone
  • Tidal (untested)
  • tunein.com
  • tver.jp
  • Twitch.tv
  • Ustream.tv
  • vk.com (Vkontakte)
  • Vimeo
  • XFINITY (untested)
  • Xiami Music
  • YouTube
  • YouTube Music
  • Zvooq
  • Яндекс.Музыка (Yandex.Music)
  • Яндекс.Радио (Yandex.Radio)
  • IbizaSonica.com

Untested Sites (after latest changes)

  • Music Choice (account is needed)
  • Noon Pacific (account is needed)
  • Superplayer.fm (regional restrictions)
  • Synology (special environment is needed)
  • Tidal (regional restrictions)
  • XFINITY (account is needed)

Usage

  1. Install extension from the chrome web store.
  2. Edit the Keyboard shortcuts to give Keysocket 'Global' permissions
    • Open a browser tab to chrome://extensions
    • Scroll to the bottom & click Keyboard shortcuts
    • Find Keysocket Media Keys and change each desired key to Global

API

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.

Please, contribute!

  • Looking for plugins for other music players. Create Pull Requests to contribute. Create Issues to inform us about broken sites (but PR is preferable).

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.

More Repositories

1

webvr-boilerplate

A starting point for web-based VR experiences that work on all VR headsets.
JavaScript
1,798
star
2

sonicnet.js

Ultrasonic Networking with the Web Audio API
JavaScript
859
star
3

device.js

Semantic client-side device detection with Media Queries
JavaScript
765
star
4

pointer.js

[deprecated] Pointer.js consolidates pointer-like input models across browsers and devices.
JavaScript
453
star
5

osmus

Multiplayer HTML5 Osmos
JavaScript
401
star
6

srcset-polyfill

[Warning: not for production code]
JavaScript
351
star
7

MagicTouch

Spec-compatible touch events based on npTuioClient callbacks
JavaScript
347
star
8

spectrogram

Web Audio Spectrogram
HTML
288
star
9

oauth2-extensions

[Deprecated] An OAuth 2.0 Library for Chrome Extensions (please use chrome.identity)
JavaScript
220
star
10

markdown-preview

Enables Chrome to render markdown files as HTML
JavaScript
218
star
11

webaudioapi.com

Basic Web Audio API samples
HTML
146
star
12

ray-input

JavaScript
139
star
13

game-asset-loader

HTML5 Filesystem, offline capable loader for web game assets.
JavaScript
109
star
14

DevTools-Lab

JavaScript
92
star
15

lightning

static site generator
Python
91
star
16

CrowdForge

Django framework for crowdsourcing complex tasks using MTurk
Python
64
star
17

screencapture-www

Adds imgur upload functionality to OS X's builtin Command - Shift - 4 screencapture tool
Shell
51
star
18

chrome-screencast

Video screencasts in Chrome
JavaScript
33
star
19

copresence-vr

WebVR copresence using WebRTC.
JavaScript
32
star
20

physical-units

A modest proposal for using real physical units for web-based UIs.
JavaScript
28
star
21

webrtc-samples

Hacking around with WebRTC
JavaScript
27
star
22

moving-music

Musical tracks on tracks
JavaScript
25
star
23

jsperfview

Charting for JSPerf
JavaScript
24
star
24

Question-Monitor-for-Stack-Exchange

Chrome extension for monitoring Stack Exchange sites such as Stack Overflow, etc.
CSS
23
star
25

Music-Visualizer-Chrome-Extension

JavaScript
21
star
26

music-of-touch

JavaScript
21
star
27

smus.com-2012

Old blog. New link below:
JavaScript
20
star
28

jshint-extension

JavaScript
20
star
29

Chrome-Media-Keys

Chrome extension to bind your keyboard's media keys to your favorite web-based music player.
JavaScript
17
star
30

mobile-web-samples

a dumping ground for random mobile web samples
JavaScript
15
star
31

sensor-fusion

Implementing sensor fusion used in WebVR polyfill
JavaScript
13
star
32

gestural-music-direction

JavaScript
12
star
33

spatial-audio

JavaScript
11
star
34

touch-laptop-experiments

Touch screen laptop experiments: responsive input and simultaneous interactions using both mouse/trackpad and touchscreen.
JavaScript
11
star
35

html5slidedown

Write HTML5 slides in markdown
JavaScript
8
star
36

jQuery-Mobile-Hacker-News

A Hacker News client written in jQuery Mobile
Java
7
star
37

smusique-extension

Chrome extension to do client side scraping from ultimate-guitar and imslp
JavaScript
7
star
38

asimov

Asimov's Chronology of Science and Discovery
JavaScript
7
star
39

web-component-samples

Playground for web components.
JavaScript
6
star
40

image-zoom

Lightroom-like image comparison view for seeing differences between compression quality levels, compression formats (JPEG, WebP) and sizes (1x, 2x).
JavaScript
6
star
41

time-sync

Playing with network and audio time synchronization
JavaScript
6
star
42

infinite-scroll

A simple infinite scrolling solution.
JavaScript
6
star
43

android-nxt

Sample code for integrating Android and Mindstorms NXT
Java
5
star
44

Chronos

Greek god of Chrome Time Tracking
JavaScript
5
star
45

smus.com

Content for smus.com
JavaScript
5
star
46

That-Trip

KML Tours in Google Earth
JavaScript
5
star
47

webplatform-tools

Tools for automating tasks on the web platform docs project.
Python
5
star
48

Radio-61

Chrome extension for thesixtyone
JavaScript
5
star
49

Running-Gestures

Prototype code for detecting pace of a runner, and then detecting when they skip
Python
4
star
50

smustalks

Repository of Talks
JavaScript
4
star
51

School-Connect

A sample jQuery Mobile application
JavaScript
4
star
52

Web-Storage-Benchmark

How much storage space is available to you if you use localStorage? WebSQL? IndexedDB? etc
JavaScript
4
star
53

humanbody.js

Java
3
star
54

smusique-uploader

A proxy server that converts and uploads PDFs to smusique.com
JavaScript
3
star
55

inequality-simulator

Simulating wealth inequality
JavaScript
3
star
56

ontonight

Weekend project: preview live music nearby to decide if you want to see the show or not.
TypeScript
3
star
57

llm4cld

JavaScript
2
star
58

asimov-gpt

Python
2
star
59

sensor-streamer

Streaming sensor data from one webpage to another using firebase.
JavaScript
2
star
60

smus.com-template

theme for the new smus.com
JavaScript
2
star
61

Chrome-Brazil

JavaScript
2
star
62

exupery

A voice-powered sketching robot. "Draw me a sheep!"
TypeScript
2
star
63

central-asia-maps

A better look at Central Asia in the middle ages. Inspired by "Thirteenth Tribe" and "Lost Enlightenment"
JavaScript
1
star
64

death-metal-english

Stay tuned
TypeScript
1
star
65

media-control-prototype

How media controls might work in Chrome
JavaScript
1
star
66

istherewind.com

App Engine application for checking the wind.
Python
1
star
67

automerge-playground

JavaScript
1
star
68

cld-tools

JavaScript
1
star