How to make audio element more responsive?

Question

Introduction

Greetings, I have looked at some similar questions that are on this platform and none of them seem to match my problem or maybe I missed something but I will try my best to give it a try because I am new in this platform.

OverView

This audio app maps the keyboard keys to audio samples.

Problem

There is a audio delay when pressing the keys rapidly and after each press the sample sound keeps playing for 4 to 6 second before it calls another sound and doesn't kill the sound immediately after the keyboard button is released.

Code

This is what I tried:

const dump = console.log.bind(console);

const sample = new Object
({
    drum: "/samples/drums/trance01/BD_Trance.wav",
    clap: "/samples/drums/trance01/Clap_trance.wav",
});

const keymap = new Object
({
    "KeyD": "drum",
    "KeyC": "clap",
});


Object.keys(sample).forEach((smpl)=>
{
    let node = document.createElement("audio");
    node.id = (smpl+"Sample");
    node.className = "instrument";
    node.src = sample[smpl];
    document.body.appendChild(node);
});


document.body.addEventListener("keydown", function keyListener(event)
{
    event.preventDefault();  // kill it
    event.stopPropagation(); // seal it's ashes in a capsule
    event.stopImmediatePropagation(); // and hurl it into the sun!

    let key = event.code;
    // console.log("pressed: "+key);
    let tgt = keymap[key];

    if (!tgt){ dump(key+" - is unused"); return };

    
    var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
    let nde = document.getElementById(tgt+"Sample");
    nde.play();
    dump("play: "+tgt);
 
}
});

Answer 1

Following what happens in the logic and how elements respond in their own way (and time) is important for analysing what the issue may be.

In this case I believe this can be solved by cloning the source-node, not expecting it to play multiple instances of itself by itself (or that is what I believe should happen) - but we can force it to:

const dump = console.log.bind(console);

const sample = new Object
({
    drum: "/samples/drums/trance01/BD_Trance.wav",
    clap: "/samples/drums/trance01/Clap_trance.wav",
});

const keymap = new Object
({
    "KeyD": "drum",
});


(Object.keys(sample)).forEach((item,indx)=>
{
    let node = document.createElement("audio");
    node.id = (item+"Sample");
    node.className = "instrument";
    node.src = sample[item];
    document.body.appendChild(node);
});


function keyHandler(event)
{
    if (event.ctrlKey){ return }; // whew .. that was annoying as f*ck
    event.preventDefault();  // kill it
    event.stopPropagation(); // seal it's ashes in a capsule
    event.stopImmediatePropagation(); // and hurl it into the sun!

    let key = event.code;
    let tag = keymap[key];
    let nde,tgt;

    tgt = document.getElementById(tag+"Sample");
    if (!tgt){ dump(key+" - is unused"); return };

    nde = tgt.cloneNode(true);
    nde.id = (tgt.id+"Clone");
    nde.addEventListener("ended",function()
    {
        this.parentNode.removeChild(this);
    });
    document.body.appendChild(nde);
    nde.play();
    dump("playing: "+tgt);
}


document.body.addEventListener("keydown", keyHandler);