热键播放/暂停HTML5音乐播放器

Question

这是我用于HTML5音乐播放器的JavaScript代码的一小部分。我想知道你们是否可以帮助我建立一个热键来使用Space键切换播放/暂停按钮。有任何想法吗？

CODE：

$('.trackslist li').live('click', function(event) { 

    var $track = $(this), 
     $player = $track.closest('.player'), 
     trackId = $track.data('sc-track').id, 
     play = $player.is(':not(.playing)') || $track.is(':not(.active)'); 

    if (play) { onPlay($player, trackId); }else{ onPause($player); } 

    $track.addClass('active').siblings('li').removeClass('active'); 

    return false; 

    }); 

    $('.next').live('click', function(event) { 
     $player = $(this).closest('.player'); 
     onNext($player); 
    }); 

    $('.prev').live('click', function(event) { 
     $player = $(this).closest('.player'); 
     onPrev($player); 
    }); 

一个想法，我发现：

document.onkeydown = function(e){ 

    var ev = isIE?event:e; 
    if(ev.charCode && ev.charCode == 32) 
     player.playPause(); 
    else{ 
     switch(ev.keyCode){ 
      case 32: 
       player.playPause(); 
       break; 
      case 39: 
       player.nextSong(); 
       break; 
      case 37: 
       player.prevSong(); 
       break; 
      case 38: 
       player.volumeInc(); 
       break; 
      case 40: 
       player.volumeDec(); 
       break; 
     } 
    } 
} 

Answer 1

在你的document元素的​​事件代码，该player变量没有设置任何东西。

而且jQuery的normilizes的e.keyCode和e.charCode性能与e.which但如果你使用绑定到事件仅仅是jQuery的：

$(document).on('keydown', function (event) { 
    var key = event.which,//get charCode of event 
     player = $('audio');//get the player (I'm assuming it's an `audio` tag) 

    switch(ev.keyCode){ 
     case 32: 
      player.playPause(); 
      break; 
     case 39: 
      player.nextSong(); 
      break; 
     case 37: 
      player.prevSong(); 
      break; 
     case 38: 
      player.volumeInc(); 
      break; 
     case 40: 
      player.volumeDec(); 
      break; 
    } 

}); 

我注意到，trackId = $track.data('sc-track').id可能实际上没有得到$track元素的ID ，请尝试以下之一：

trackId = $track.data('sc-track')//this will get the `data-sc-track` attribute for this element 

OR

trackId = $track[0].id//this will get the ID of this element 

最后一个注释.live()自jQuery 1.7起折旧。如果您使用的是旧版本，则应该使用.delegate()，如果您使用的是jQuery 1.7或更高版本，则应使用.on()。

来源：http://api.jquery.com/on