熱鍵播放/暫停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