javascript - 如何检测键盘按键上的点击事件 : Play/Pause (▶/❚❚), Electron Js 上的下一个和上一个

Question

根据这个JavaScript detecting play/pause keyboard (virtual) key ，可以使用 javascript 检测播放/暂停、下一个和上一个(硬件媒体 key 处理)键，但仅限于 Chrome。 Electron 中有类似的东西吗？ PS:它是用于音频播放器的。

Answer 1

我正在回答我的问题! 将媒体键与 EvenListener 一起使用并不是实现此目的的有效方法。 并非所有浏览器都支持媒体 session API。查看此内容以获取有关 API 的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API 。 使用媒体 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. */ });
}

现在对于 Electron，如果您使用最新版本，那么您可能可以使用媒体 session API(在渲染器进程中)，并且在播放 Youtube 视频时它可以像 chrome 一样正常工作(您可以播放/暂停，转到下一个)和以前的媒体...)。 但是，当另一个应用程序在我们的 Electron 应用程序(例如 Chrome)之前开始使用媒体键时，我们仍然会遇到问题，这个问题无法使用媒体 session API 来解决。 在 Electron 中，我们有 Electron 包中的 globalShortcut 用于设置快捷方式 示例:

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

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

这对于所有快捷键都可以正常工作，但对于媒体键则无效! 原因是Linux key 默认被dbus窃取，所以我们需要操作系统级别的控制(直接与dbus交互的包)。 我搜索了它，发现一些传入的包(未完成)使用 Linux 的 dbus 来处理媒体 key 。 https://www.npmjs.com/package/electron-media-service 或者你可以自己使用 dbus 包:D(我不确定，但我认为对于 Electron ，你需要使用 native-packages => native-dbus) 我欢迎对此答案的任何改进。

对我有帮助的问题https://github.com/electron/electron/issues/5268