cancel an if statement if another statement comes true

Question

I have this function that plays different sounds to different keys. But if I press a key, then press another key right away, the previous sound will still play.

My question is, how do I cancel the previous sound when a new one is played?

Here's the code:

    
 window.addEventListener("keydown", checkKeyPressed, false);

    function checkKeyPressed(evt) {
        if (evt.keyCode == "81") { //q
            document.getElementById('enklyd').play();
        }
        if (evt.keyCode == "87") { //w
            document.getElementById('lyd1').play();
        }
        if (evt.keyCode == "69") { //e
            document.getElementById('lyd2').play();
        }
        if (evt.keyCode == "82") { //r
            document.getElementById('lyd3').play();
        }
        if (evt.keyCode == "84") { //t
            document.getElementById('lyd4').play();
        }
        if (evt.keyCode == "89") { //y
            document.getElementById('lyd5').play();
        }
    }

Have you tried searching for any solutions? https://stackoverflow.com/questions/14834520/html5-audio-stop-function — Joss Classey, Dec 16 '18 at 18:03
I've read that post. I am pretty new to js, and certainly have not looked in to jquery and therefore didn't get any help from that post — ff29, Dec 16 '18 at 18:05

score 2 · Answer 1 · answered Dec 16 '18 at 18:07

This isn't really a matter of "stopping" the if statement because they are individually doing their job correctly. What you want to stop is the sound clip being played.

For this you can use the .pause() method, set the .currentTime to 0, or I believe you can also set the volume to 0 and just let it play out.

As mentioned in a comment, there are a few SO questions that may have already answered this. Is there a unique situation that isn't being answered in those?

score 0 · Answer 2 · answered Dec 16 '18 at 18:12

I think this works for you:

var e = document.getElementById('enklyd');
function checkKeyPressed(evt) {
    if (evt.keyCode == "81") { //q
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('enklyd');
        e.play();
    }
    if (evt.keyCode == "87") { //w
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('lyd1');
        e.play();
    }
    if (evt.keyCode == "69") { //e
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('lyd2');
        e.play();
    }
    if (evt.keyCode == "82") { //r
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('lyd3');
        e.play();
    }
    if (evt.keyCode == "84") { //t
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('lyd4');
        e.play();
    }
    if (evt.keyCode == "89") { //y
        e.pause();
        e.currentTime = 0;
        e = document.getElementById('lyd5');
        e.play();
    }
}

Thanks, but this error message showed: Uncaught TypeError: Cannot read property 'pause' of undefined at checkKeyPressed — ff29, Dec 16 '18 at 18:17
@ff29 I have just updated my answer. Look at the top of the code block. — heniotierra, Dec 16 '18 at 18:19
If it fails even with that first line, it must be because of the context of your code. — heniotierra, Dec 16 '18 at 18:22

Arun D · Answer 3 · 2018-12-16T18:45:59.007

Actually, the issue is not regarding the if condition. But you can try the following code, I think this will work fine for you.

window.addEventListener("keydown", checkKeyPressed, false);

var keyMap = {
    "81": "enklyd", //q
    "87": "lyd1", //w
    "69": "lyd2", //e
    "82": "lyd3", //r
    "84": "lyd4", //t
    "89": "lyd5", //y
};

var prevPlayed = null, target = null, prevTarget = null;

function checkKeyPressed(evt) {

    prevTarget = document.getElementById(keyMap[prevPlayed])
    target = document.getElementById(keyMap[evt.keyCode]);

    if (prevPlayed !== null && prevTarget !== null)
        prevTarget.pause();

    if (keyMap[evt.keyCode] && target !== null) {
        target.currentTime = 0;
        target.play();
    }

    prevPlayed = evt.keyCode;
}

score 0 · Answer 4 · answered Dec 16 '18 at 18:46

You should use 'switch' instead of using 'if'.Just add a common class to all your elements

const yourDiv = document.querySelector('yourDiv');
window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(evt) {
    yourDiv.currentTime = 0;
    switch(evt) {
        case '81':                
            document.getElementById('enklyd').play();
            break;
        case '87' :
            document.getElementById('lyd1').play();
            break;
        case '69' :
            document.getElementById('lyd2').play();
            break;
        case '82' :
            document.getElementById('lyd3').play();
            break;
        case '84' :
            document.getElementById('lyd4').play();
            break;
        case '89' :
            document.getElementById('lyd5').play();
            break;
        default :
            return null;
        }
}

cancel an if statement if another statement comes true

4 Answers4

Linked