如何使音频元素更灵敏

Question

简介

大家好，我在这个平台上看到了一些类似的问题，它们似乎都不符合我的问题，或者可能我错过了什么，但我会尽力尝试，因为我是这个平台的新手。

OverView

此音频应用程序将键盘键映射到音频样本。

问题

快速按键时会有音频延迟，每次按键后，样本声音会持续播放4到6秒，然后才会调用另一个声音，并且不会在释放键盘按钮后立即消除声音。

代码

这就是我尝试的：

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

跟踪逻辑中发生的事情以及元素如何以自己的方式(和时间(响应对于分析问题可能是什么很重要。

在这种情况下，我相信这可以通过克隆源节点来解决，而不是期望它自己播放多个实例(或者我认为这是应该发生的(，但我们可以强制它：

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);