javascript - 多次单击按钮，在 JavaScript 中播放多个音频(旧声音重叠新声音)

Question

当我点击按钮时，音频开始。但是当我多次点击按钮时，多个音频同时播放。

HTML CODE
<button id = 'bt'> Click Me </button>

JavaScript Code

<script type="text/javascript">
  url = 'song.mp3';

  var btn =document.getElementById('bt');
  btn.addEventListener('click', function(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', url);
    playFunc(my, 3);
  });

  function PlayFunc(target, RepeatCount) {
    var soundFunc = function(){
        RepeatCount--;
        target.currentTime = 0;
        if (RepeatCount>0)
            target.play();
        else
            target.removeEventListener('ended', soundFunc);
    }
    target.addEventListener('ended', soundFunc)
    target.play();
  }
</script>

我认为的解决方案-

1. 在创建新的点击事件之前，销毁最后一个事件然后创建新的。
2. 当用户点击第二个时，它会检查是否 cureentTime == 0，然后播放音频，否则会重新开始，否则什么也不会发生。

Answer 1

感谢 Gurpreet，您的解决方案成功了。

On each click I'm creating a new audio element thats why multiple audio are playing.

只是我将我的音频保存到一个变量并传递给 playFunc。

  url = 'song.mp3'
  const myAudio = new Audio(url);

  var btn =document.getElementById('bt');
  btn.addEventListener('click', function(){
    playFunc(myAudio, 3);
  });

  function PlayFunc(target, RepeatCount) {
    var soundFunc = function(){
        RepeatCount--;
        target.currentTime = 0;
        if (RepeatCount>0)
            target.play();
        else
            target.removeEventListener('ended', soundFunc);
    }
    target.addEventListener('ended', soundFunc)
    target.play();
  }