Holding a key duplicates it's purpose

Question

I have a small problem, I made a piano using JavaScript in the browser and it's working with the keyboard keys. i need only javascript, jquery is not an option for me right now.

The issue is when I hold a key, the ~~noise~~ sound keeps on repeating itself and I want it to play only once per key I press even when I hold it for couple of seconds.

How can I do that?

<audio id="do"> 
<source src="do.mp3" type="audio/mp3"></audio>


<script>

    var do1 = document.getElementById('do');

    function load1()
    {
        do1.load();
    }

    document.addEventListener('keydown',function(event) {
        if(event.keyCode == 90) {{do1.load()
            do1.play();
        }}

    });
</script>

@Arvind That would play it when you release the key, hardly realistic for a keyboard. — Niet the Dark Absol, Jul 04 '14 at 12:53
@ Arvind: That would delay the input quite a bit. For another solution see https://stackoverflow.com/questions/9098901/how-to-disable-repetitive-keydown-in-jquery — Zyl, Jul 04 '14 at 12:53
Although the duplicate uses jQuery, the principle involved is basic JavaScript and can be applied here :) — Niet the Dark Absol, Jul 04 '14 at 12:55

fast · Accepted Answer · 2014-07-04T15:10:37.330

0

Add a flag on the first key press (key down event), that is reset on the key up event and prevents subsequent key down events from triggering multitple times without releasing the key in the meanwhile.

var prevent = false;

document.addEventListener('keydown',function(event) {
    if(event.keyCode == 90 && !prevent) {
        prevent = true;
        do1.load()
        do1.play();
    }
});

document.addEventListener('keyup',function(event) {
    prevent = false;
});

However, an issue might be that the keyup event might not be received when the focus was set elsewhere before releasing a key. I'm not aware that there are any capture-key mechnisms available to prevent that...

edited Jul 04 '14 at 15:10

answered Jul 04 '14 at 12:55

fast

885
7
15

It would be more helpful for the OP and further visitors, when you add an explaination for your intention. Thanks. – Reporter Jul 04 '14 at 14:01
@kshayk forgot to actually set the flag, sorry! try it out, now :-) – fast Jul 04 '14 at 15:12
but there is another problem, it doesn't let me play couple of keys togethere with the code you did there..any suggestions? – kshayk Jul 04 '14 at 15:59
ok i did a different prevent var for evey note and it works :) – kshayk Jul 04 '14 at 16:01

Holding a key duplicates it's purpose

1 Answers1