JavaScript检测播放/暂停键盘（虚拟）按键

Question

偶然间，我按下了键盘上播放/暂停按钮 (▶/❚❚)(位于 的 Num Lock 上方)。当时正在播放一个在未聚焦标签页中的 YouTube 视频，但令我惊讶的是，YouTube 视频立即暂停了。

现在，我尝试查找它是如何工作的，但是我没有在互联网上找到任何解释如何检测键盘按键的内容。我尝试在控制台中运行onkeydown = function(e) {console.log(e)}，但按下播放/暂停按钮并没有触发任何事件。 另外，https://keycode.info/ 对此也没有帮助。 我确实找到了http://www.kbdedit.com/manual/low_level_vk_list.html，其中列出了许多'虚拟键代码'，包括VK_MEDIA_PLAY_PAUSE，这可能就是我按的键，但我没有找到JS触发事件的任何方法。

我想指出的是，这项功能似乎只在Chrome浏览器中有效，而在Firefox浏览器中无法使用（据我测试）。可能这还是一项实验性质的功能，但我真的很想知道YouTube用来捕捉这个事件的系统，即使当前选项卡没有打开，Chrome浏览器也没有聚焦。

附注：我在Ubuntu 18.04上体验到了这个功能，但我不确定它是否能在Windows上使用。

- Joeytje50

---

https://developers.google.com/web/updates/2017/02/media-session - Roland Starke

Answer 1

Chrome负责处理硬件媒体键，更多细节请查看chrome://flags/#hardware-media-key-handling。此外，这是包含文档和演示的链接：https://www.chromestatus.com/feature/5639924124483584。

- David Major

---

有没有任何在线资源可以给我一个起点，来弄清楚如何使用这个？ - Joeytje50

是的，我找到了这个链接： https://www.chromestatus.com/feature/5639924124483584那里有一些文档链接，但我仍然不确定你的总体目标是什么。 - David Major

谢谢，看起来这个演示很清晰，我可以用它来工作。我只是想看看是否可以构建类似于YouTube的功能。你能编辑你的答案并包含那个链接吗？这样我就可以将其标记为已接受的答案了。 - Joeytje50

当然，已经完成了。是的，你绝对可以使用这个构建类似的功能。 :) - David Major

Answer 2

来自Google Chrome媒体会话示例：

/* Media navigation Action handlers */

    navigator.mediaSession.setActionHandler('previoustrack', function() {
      console.log('> User clicked "Next Track" icon.');
    });

    navigator.mediaSession.setActionHandler('nexttrack', function() {
      console.log('> User clicked "Next Track" icon.');
    });

    navigator.mediaSession.setActionHandler('play', function() {
      log('> User clicked "Play" icon.');
      // Do something more than just playing audio...
    });

这些 Chrome API 可在 Chrome 57+ 和 Firefox 82+ 上使用。

- Jesse Reza Khorasanee

---

看起来，自去年十月以来，Firefox现在也支持它：https://caniuse.com/mdn-api_mediasession。我认为这意味着您提供的代码现在可以在Chrome、FF和Edge上完全正常工作，对吗？ - Joeytje50

是的，你说得对。刚刚更新了答案。 - Jesse Reza Khorasanee

我不再拥有媒体键，因此我无法轻松测试这个了。 - Jesse Reza Khorasanee