How do i run a Audio.play, with the path in another function, as fast as if they were in the same function?

Question

I'm trying to make a "cookie clicker" like game where I need to play a sound every time the clicker has been clicked. My problem is that the new Audio and the audio.play are in two separate functions (with global variables), which causes a delay from click to sound.

Are there any way to get rid of the delay, without moving them to the same function?

Here is where the audio is being defined:

[].forEach.call(document.getElementById('skins').children, function(e) {
e.onclick = function () {
  klikketskin = this.id;
  clicklyd = new Audio(`Medier/Lyd/Clicker/${klikketskin}.mp3`); }

Here's where it's played (later in the script):

function clickevent() {
clicklyd.play(); }

How it is now (turn on sound): https://imgur.com/a/2vf4NWG

What i want (turn on sound): https://imgur.com/a/x4wYFq2

Tank You! :D

Answer 1

You should reset the currentTime property back to 0 which will let the sound replay from the start, before calling play() again.

function clickevent() {
  clicklyd.currentTime = 0;
  clicklyd.play(); 
}

However this will cut off the previous sound if it's not finished yet.