CODEWITHSUNDEEP
javascriptnode.jselectron
abdeslam chettout
abdeslam chettout

Reputation: 73

how to detect the click event on the keyboard keys : Play/Pause (▶/❚❚), Next and Previous on Electron Js

according to this JavaScript detecting play/pause keyboard (virtual) key , it is possible to detect the play/pause, next and previous (Hardware Media Key Handling) keys using javascript but only in chrome. is there any similar thing in electron ? PS: it is for an audio player.

Upvotes: 2

Views: 1098

Answers (2)

abdeslam chettout
abdeslam chettout

Reputation: 73

I'm answering my question ! using the media keys with EvenListener is not an effective way to do that. not all Browsers support the Media Session API. Checkout this for more information about the API : https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API. Example for usign media session API:

if ('mediaSession' in navigator) {
//setting the metadata
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
}

Now for Electron, if you using the latest version then probably you could use the media session API (in the renderer process) and it would work just fine as chrome when playing Youtube videos (you can play/pause, go to next & previous media...). But we still can face problems when another application starts using the media keys befor our Electron app (like Chrome), this problem can't be solved using the media session API. In Electron we have globalShortcut from Electron package for setting shortcuts Example:

const { app, globalShortcut } = require('electron')

app.whenReady().then(() => {
  globalShortcut.register('Alt+CommandOrControl+I', () => {
    console.log('Electron loves global shortcuts!')
  })
}).then(createWindow)

This would work just fine with all shortcuts, but not effectivly with the media keys ! the reason why is because Linux keys are by default stolen by dbus, so we need os level control (a package that interacts with dbus directly). i searched for that and i found some incoming packeges (not finished) that uses the dbus for linux to handle media keys. https://www.npmjs.com/package/electron-media-service or you can use the dbus package your self :D (i'm not sure but i think for electron you gonna need to use native-packages => native-dbus) I welcome any improvments on this answer.

issue that helped me https://github.com/electron/electron/issues/5268

Upvotes: 2

syarul
syarul

Reputation: 2187

Should work in chrome/electron

document.addEventListener('keyup', ({ key }) => { 
  const mediaKey = [
    'MediaTrackNext', 
    'MediaTrackPrevious', 
    'MediaPlayPause', 
    'MediaStop'].includes(key)
    
  mediaKey && console.log(key)
})

Upvotes: 1

Related Questions