Question

有没有办法在浏览器标签/窗口中使用Javascript访问“媒体键”？

我主要对Google Chrome解决方案感兴趣。

使用以下代码，似乎没有为媒体键生成事件：

<html>
<body onKeyDown="showKeyCode(event)">
    <script type="text/javascript">

        function showKeyCode(event) {
            alert(event.keyCode);
        }

    </script>
</body>
</html>

我错过了什么吗？我可以使用Google Chrome扩展程序做得更好吗？

更新：为了解决这个问题，我制作了以下工具：

Chrome MusicMan
Mediakeys Server

Answer 1

这是微软的list of key codes;它们包括诸如“VK_VOLUME_MUTE”之类的键。 VK_VOLUME_MUTE的关键代码列为0xAD。 0xAD是十进制是173。

当然，当我加载以下内容并按下键盘上的静音按钮时，报告的密钥代码为173.因此它们的工作方式与其他任何密钥相同;但是，如果密钥代码是特定于Windows的，那么我也不会感到惊讶。可能需要一些实验。

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(document).keydown(function(ev){
       alert(ev.keyCode);
    });
});
</script>

</body>
</html>

Answer 2

关于你是否可以做得比Chrome扩展程序更好：不，你不能 - 我为一个网站制作了一个内容脚本，并在OS X 10.7上当前稳定版本的Chrome 16中运行它。脚本很简单：

console.log('Content script loading');

$("body").bind("keyup",function(event){
    console.log(event.keyCode);
})

它显示没有触发后退，播放/暂停，前进，静音，音量降低或音量增加键的事件。

有趣的是，未使用的F5键会生成一个键码，因此如果您愿意，可以将其用作替代码。

Answer 3

看起来，现在有可能在媒体按键上执行JS代码。我拿起mikemaccana's answer，抬头看着KeyEvent：

$(ready);

function ready() {
  $(document).on('keydown', onKeyDown);
}

function onKeyDown(ev) {
  if (ev.code === 'MediaPlayPause') alert('Play/Pause');
  if (ev.code === 'MediaStop') alert('Stop');
  if (ev.code === 'MediaTrackPrevious') alert('Previous Track');
  if (ev.code === 'MediaTrackNext') alert('Next Track');    
  if (ev.code === 'VolumeUp') alert('Volume Up');
  if (ev.code === 'VolumeDown') alert('Volume Down');
  if (ev.code === 'VolumeMute') alert('Volume Mute');
}

您只需在alert(ev.code);中进行onKeyDown即可获取密钥代码。

我将此示例上传到JSFiddle上，因此您可以对其进行测试。

Answer 4

从Chrome 73开始，媒体键已得到明确支持，请参见https://developers.google.com/web/updates/2019/02/chrome-73-media-updates

总而言之，您可以添加安装事件处理程序，

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

上面的文档提供了很好的概述。

https://googlechrome.github.io/samples/media-session/包含示例代码和演示。

https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API有更详细的文档。

从浏览器选项卡中访问“媒体键”

4 个答案: