Javascript - не работает второе воспроизведение звука по клику

Question

У меня проблема с моим скриптом для воспроизведения звука по клику.Я могу воспроизводить только один звук за раз (.add или .remove), но он не воспроизводит звук второй кнопки.

Работает только одна кнопказа один раз.

Что я здесь не так делаю ...?

Заранее спасибо!

<button class="add">ADD TO CART</button>

<button class="remove">REMOVE</button>

//----------------

var audioAdd=new Audio('add.mp3');
$('.add').click(()=>audioAdd.play()
);

var audioRemove=new Audio('remove.mp3');
$('.remove').click(()=>audioRemove.play()
);

//----------------

// For test:

/*

https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3

https://notificationsounds.com/soundfiles/99c5e07b4d5de9d18c350cdf64c5aa3d/file-sounds-1110-stairs.mp3

*/

Answer 1

последовательных кликов не будет работать, поскольку предыдущий процесс воспроизведения будет продолжаться.Вы не можете играть один экземпляр несколько раз одновременно.вы должны подождать, пока процесс воспроизведения не завершится.

вы можете сделать что-то вроде этого

let audioHolder = {};

$('.add').click(()=>{
  let tempIdentifier = Date.now();
  audioHolder[tempIdentifier] = new Audio('add.mp3');
  audioHolder[tempIdentifier].play();

  // removing after play process gets over so if won't consume memory
  setTimeout(() => {
    delete audioHolder[tempIdentifier];
  }, audioHolder[tempIdentifier].duration + 400 /* you can remove threshold value if you wants to */);
});

// audioHolder[tempIdentifier].duration gives audio duration
// and adding some threshold so
// it will delete after it's played ( just to be safe )

/* same for other click */

это будет работать для каждого клика