CODEWITHSUNDEEP
javascripthtml
Ashutosh
Ashutosh

Reputation: 1095

Clicking multiple time on Button, Multiple audio play (Older sounds overlap new) in JavaScript

When I click on button, audio start. But when I click the button multiple times, multiple audio playing simultaneously.

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>

What I'm thinking as solution-

  1. Before creating new click event, destroy last event fist then create new one.
  2. When user click second, it check if cureentTime == 0, then play audio else start again or nothing happen.

Upvotes: 3

Views: 1329

Answers (3)

Ashutosh
Ashutosh

Reputation: 1095

Thanks to Gurpreet, your solution work.

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

Simply I saved my audio to a variable and passed to 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();
  }

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5121

You can disable the button until the audio clip is over.

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();

}

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

Just de-register the click event handler in the click event handler. In order to do this, you'll need a named function.

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
}

Upvotes: 0

Related Questions