Question

这是我用于HTML5音乐播放器的一小部分JavaScript代码。我想知道你们是否可以帮我建立一个HotKey来使用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

在keydown元素的document事件代码中，player变量未设置为任何内容。

此外，jQuery使用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

最后一点，自{jQuery 1.7}起，.live()已被折旧。如果您使用的是旧版本，则应使用.delegate();如果使用的是jQuery 1.7或更高版本，则应使用.on()。

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

HotKey播放/暂停HTML5音乐播放器

1 个答案: