Question

我的播放音频onclick的脚本存在问题。我一次只能播放一个音频（.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 */

这将适用于每次点击

Javascript-第二个onclick音频播放不起作用

1 个答案: