处理 'onkeydown' 事件

Question

我已将 onkeydown 事件侦听器添加到 document，当事件触发时，我会播放一个音频文件。该音频文件是枪声。如果您点击一次该键，它可以正常播放，但如果您按住该键，音频将以极快的速度重复。我已经通过简单的 playing 条件检查解决了这个问题，但我还有另一个问题。如果我按住，只有在第一枪之后，听起来枪在重复射击。例如，它像 ta-tatatatata.

如何修理我的机关枪？让它像 tatatata.

一样火起来

Demo

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        var audio = new Audio(file);
        audio.play();
        playing = true;
        setTimeout(function() {
            playing = false;
        }, 100);
    }
}

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio);
            break;
    }
}

Answer 1

akinuri，这是我的第一个回答，但是我删除了它（我以为你想播放整个声音），所以我取消了它，它可以帮助你（它会修复keydown的延迟错误）

您应该使用 gameLoop（游戏开发中的常见模式），requestAnimationFrame。不要直接从玩家的输入触发事件，设置将在 gameLoop 内部处理的状态（它应该负责更新位置，渲染......）

var playing = false;

var keyStatePressed = false;//set state at false at init

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        var audio = new Audio(file);
        audio.play();
        playing = true;
        setTimeout(function() {
            playing = false;
        }, 100);
    }
}

//flag at true on keydown
document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            keyStatePressed = true;
            break;
    }
}

//run a game loop
function gameLoop(){
    if(keyStatePressed === true){
        playAudio(weapons.aug.audio);
        keyStatePressed = false;//reset state
    }
    //run this in 16ms (see more on game loops and requestAnimationFrame)
    requestAnimationFrame(gameLoop);
}

//launch the gameLoop
gameLoop();

Answer 2

可能应该有一个更好的方法来使用 gameLoop 和更少的全局变量，但是等待音频对象的 ended 事件标记 playing 在 false 并且确保不会开始播放您的声音，除非它已完成。

var playing = false;//tag playing as false by default

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        audio = new Audio(file);
        playing = true;
        setTimeout(function(){
            playing = false;
        },400);
        audio.play();
    }
}

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio);
            break;
    }
}

Answer 3

嘿，如果有效，请告诉我，希望对您有所帮助！

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};
function loadAudio(file) {
    var audio = new Audio(file);
    return audio;
}

function playAudio(file) {
        audio.play();
}

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            var gunsound = loadAudio(weapons.aug.audio);
            playAudio(gunsound);
            setTimeout(function() {},200);
            break;
    }
}

Answer 4

我在考虑之前就开始编写代码，这是我的第一个错误。我现在已经解决了这个问题。我所要做的就是简单地模仿 FPS 游戏的射击命令。使用 mousedown 开始间隔并使用 mouseup.

清除间隔

我不得不使用按键，而不是使用鼠标单击。因此，当我按下一个键（并按住）时，一个间隔开始并重复播放音频。当我松开按键时，间隔被清除，音频停止。

Demo

var weapons = {
    aug : {
        audio       : "weapons/aug-1.wav",
        icon        : "e",
        key         : "A",
        interval    : null,
        firstShot   : false,
    }
};

function playAudio(file, weapon) {
    if (!weapon.interval) {
        if (!weapon.firstShot) {
            var audio = new Audio(file);
            audio.play();
            weapons.aug.firstShot = true;
        }
        weapon.interval = setInterval(function() {
            var audio = new Audio(file);
            audio.play();
        }, 150);
    }
}

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio, weapons.aug);
            break;
    }
}
document.onkeyup = function(e) {
    switch (e.keyCode) {
        case 65:
            clearInterval(weapons.aug.interval);
            weapons.aug.interval = null;
            weapons.aug.firstShot = false;
            break;
    }
}

处理 'onkeydown' 事件

Handling 'onkeydown' event

javascript

audio

events

event-handling

onkeydown