使用带有 CharCode 的 onKeyDown 事件答案

【问题标题】：Using a onKeyDown event with CharCode使用带有 CharCode 的 onKeyDown 事件
【发布时间】：2015-05-03 12:02:53
【问题描述】：

我正在用鼓垫制作自己的播放器，我需要帮助来为键盘按键分配功能。我有（现在）3 种声音的播放列表：

var playlist = [
    {
        artist: "Snare",
        title: "Snare",
        source: "Snare.wav"
    },
    {
        artist: "Kick",
        title: "Kick",
        source: "Kick.wav"
    },
    {
        artist: "Clap",
        title: "Clap",
        source: "Clap.wav"
    },
];

我有一些通过按钮运行的功能：

var currentSong = 0;

var play = function() {
    var audio = document.getElementById("audio1");
    audio.play();
}
var pause = function() {
    var audio = document.getElementById("audio1");
    audio.pause();
}
var jeden = function() {
    var audio = document.getElementById("audio1");
    currentSong = 0;
    audio.src = playlist[currentSong].source;
}
var dwa = function() {
    var audio = document.getElementById("audio1");
    currentSong = 1;
    audio.src = playlist[currentSong].source;
}
var trzy = function() {
    var audio = document.getElementById("audio1");
    currentSong = 2;
    audio.src = playlist[currentSong].source;
}

还有html：

<body>
    <audio autoplay="autoplay" ontimeupdate="showinfo()" id="audio1" 
           controls="controls"></audio>
    <br/>
    <button onclick="jeden()">1</button>
    <button onclick="dwa()">2</button>
    <button onclick="trzy()">3</button>
</body>

我认为最简单的方法是将按钮分配给键盘键。有人可以帮帮我吗？

【问题讨论】：

您找到正确的解决方案了吗？

标签： javascript keyboard onkeydown audio-player

【解决方案1】：

dzień dobry

代码将是这样的。如果合适，您可以将 keypress() 更改为 keyup() 或 keydown() - 检查这些函数的文档以了解差异。

$('body').keypress(function( event ) {
  if ( event.which == 49 ) {
     jeden();
  }
});

我参考了这个页面来确定数字 49 表示键 1： https://css-tricks.com/snippets/javascript/javascript-keycodes/

我应该提到这是一个 jQuery 解决方案，您需要学习一些基本的 jQuery 设置。这是解决此问题的一种流行方法。您还可以使用 jQuery 以更好的方式处理现有内容。

这是一个例子。 https://jsfiddle.net/7j0krzx5/

【讨论】：

【解决方案2】：

使用这个

$(document ).on( "keydown", function(event) {
    if (event.which === 80) // P key
    {
        event.preventDefault();
        // do something e.g
    }
    else if (event.which === 78) // N key
    {
        event.preventDefault();    
        // do something
    }
    // console.log(event.which);
});

JSFiddle example

如果你不想使用 jquery

var play = function() {
    alert("Play");
}
var next = function() {
    alert("Next");
}
function keyDownListener(event){
   var keyCode = ('which' in event) ? event.which : event.keyCode;
    if(keyCode === 80){ // P key
        event.preventDefault();
        play()
    }
    else if (keyCode == 78 ) { // N key
        event.preventDefault();
        next();
    }
}
document.addEventListener("keydown", keyDownListener, false);

JSFiddle example

【讨论】：