HotKey to Play/Pause HTML5 Music Player

Question

これは、HTML5ミュージックプレーヤーで使用していたjavascriptコードの小さな部分です。 Spaceキーを使用して再生/一時停止ボタンを切り替えるためにHotKeyを構築するのを手伝ってもらえないかと思いました。何か案は？

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のe.whichでe.keyCodeとe.charCode性質をnormilizesが、それはあなたが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

0：、これらのいずれかを試してください

最後に、.live()はjQuery 1.7から償却されました。古いバージョンを使用している場合は.delegate()、jQuery 1.7以降を使用している場合は.on()を使用してください。

出典：http://api.jquery.com/on