代码之家 › 专栏 › 技术社区 › Ashutosh

在JavaScript中单击multiple time on按钮,多个音频播放(旧的声音与新的声音重叠)

html javascript

Ashutosh · 技术社区 · 6 年前

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

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>

在创建新的点击事件之前,先销毁最后一个事件,然后再创建一个新事件。
当用户单击second时,它将检查currentTime是否==0,然后播放音频,否则将重新启动,否则什么都不会发生。

3 回复 | 直到 6 年前

Ashutosh 6 年前

多亏了古普雷特,你的解决方案奏效了。

每次点击我都会创建一个新的音频元素,这就是为什么要播放多个音频。

我只需将音频保存到一个变量并传递给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();
  }

Scott Marcus 6 年前

只需在click事件处理程序中取消注册click事件处理程序。为此,您需要一个命名函数。

btn.addEventListener('click', doPlay);

function doPlay(){
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', url);
  playFunc(audioElement, 3);
  btn.removeEventListener('click', doPlay); // <-- de-register the handler
}

Wimanicesir 6 年前

const url = 'http://www.noiseaddicts.com/samples_1w72b820/4927.mp3';
const my = new Audio(url);

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

function playFunc(target, RepeatCount) {
btn.disabled=true;
 var soundFunc = function(){
    RepeatCount--;
    target.currentTime = 0;
    if (RepeatCount>0)
        target.play();
    else{
       target.removeEventListener('ended', soundFunc);
        btn.disabled=false;
    }

}
target.addEventListener('ended', soundFunc)
target.play();

}