播放/暂停 HTML5 音乐播放器的热键 [关闭]

Question

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

代码：

   $('.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 元素上的keydown 事件代码中，player 变量未设置为任何值。

jQuery 还使用 e.which 规范化 e.keyCode 和 e.charCode 属性，但前提是您使用 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

或

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