Javascript 使用带有CharCode的onKeyDown事件_Javascript_Keyboard_Onkeydown_Audio Player

Javascript 使用带有CharCode的onKeyDown事件

javascript keyboard

Javascript 使用带有CharCode的onKeyDown事件,javascript,keyboard,onkeydown,audio-player,Javascript,Keyboard,Onkeydown,Audio Player,我正在用drumpad制作自己的播放器，我需要帮助为键盘键分配功能。我有（现在）3种声音的播放列表： var playlist = [ { artist: "Snare", title: "Snare", source: "Snare.wav" }, { artist: "Kick", title: "Kick", source: "Kick.wav" }, {

我正在用drumpad制作自己的播放器，我需要帮助为键盘键分配功能。我有（现在）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>




1.
2.
3.

我认为最有效的方法是将按钮分配给键盘键。有人能帮我吗？

dzieńdobry

代码是这样的。如果合适，您可以将keypress（）更改为keyup（）或keydown（）——查看这些函数的文档以了解它们之间的差异

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

我参考本页确定数字49表示键1：

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

这里有一个例子

用这个

$(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);
});

如果您不想使用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);

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