检测到按下键盘上的“下一曲目”按钮？答案

【问题标题】：Detect press of "next track" button on keyboard?检测到按下键盘上的“下一曲目”按钮？
【发布时间】：2013-05-17 13:09:33
【问题描述】：

我希望能够检测到用户键盘上的“下一首曲目”、“上一首曲目”和（如果适用）“随机播放”按钮的时间。这甚至可能吗？谢谢！

【问题讨论】：

标签： javascript jquery keyboard keyboard-events

【解决方案1】：

如果您知道密钥代码，则可以。尽管并非所有键盘都有它，或者可能会有所不同。（猜测）

通过执行此操作并按一个键来查看键码：

$(window).keydown( function(event){ console.log(event.keyCode); } );

当您拥有代码时，您可以在按下该键时处理该事件。

小提琴：http://jsfiddle.net/JyKMN/

【讨论】：

对我来说，“下一个曲目”得到 176，“上一个曲目”得到 177。 “随机播放”键根本不注册。这是通用的还是特定于键盘的？谢谢！
不知道，但在我的 Mac 上，浏览器甚至没有收到事件。无论你想做什么，我都会避免依赖这个。也许使用 37 和 39（箭头键）
谢谢。我绝对不依赖它，它只是一个辅助控制。
我刚刚在帖子中添加了一个小提琴。

【解决方案2】：

我似乎找不到 shuffle keyCode，但它捕捉了快进和快退......必须有比这个 IMO 更好的方法来做你想做的事情。

$('#capture').on('keydown',function(e){
    switch (e.which) {
        case 176:
            alert('Fast Forward');
            break;
        case 177:
            alert('Rewind');
            break;
        default:
            alert('Neither FF or rewind was pressed');  
            }      
});

Demo

【讨论】：

【解决方案3】：

实际上，现在可以使用浏览器提供的媒体会话功能。普通键盘事件通常不支持键盘中的播放器控制按钮。这是来自mozilla docs 的示例：

if ('mediaSession' in navigator) {
  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('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
}

请注意，并非所有浏览器都支持此功能。

【讨论】：

不错。谢谢你的回答。这是我第一次看到该功能的描述。