Stop AudioElement onClick

I hope, you can help me. I am now stuck at this problem for several Days and can’t solve it. With the BTNReminder Button I set a Timer. When the time’s up the AudioElement play the sond i set. Now i Try to Stop the Sound but i am not able to Catch the AudioElement. I have tried to Mute the whole Tab, but that alsow didend Work. Idealy I woud like to make some Function, that Paus the Audio Element onclick like this audioElement.pause();

Is this possible? Did I make somwhere a Mistake?

Pleas Help :-/

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Major Support</title>
    <script
      src="http://code.jquery.com/jquery-latest.min.js"
      type="text/javascript"
    ></script>

  </head>


      <div class="buttonWrapperDiv">
        <h3 id="minutes">00:00</h3>
        <span id="count"></span>
        <button id="stopBTNtwo">STOP</button>
      </div>
      <div class="btnWrapper">
        <button id="BTNReminder" value="5">5 seconds</button>
      </div>
    </div>

    <script>

$(function () {
        function countdownReal(number) {

          $("#").html(number);
          if (number === 0) {
            d.resolve();
          } else {
            number -= 1;
            window.setTimeout(function () {
              countdownReal(number);
            }, 1000);
          }
          return d.promise();
        }

        function waitForAudioToFinish(audioElement) {
          if (!audioElement.paused) {
            setTimeout(function () {
              waitForAudioToFinish(audioElement);
            }, 200);
          } else {
            d1.resolve();
          }
        }
    
        function playSong(src) {
          var audioElement = document.createElement("audio");
              audioElement.setAttribute("autoplay", "autoplay");
          audioElement.setAttribute("id", "beepbeep");
          audioElement.setAttribute("value", "test");
          audioElement.setAttribute("src", src);
          audioElement.play();
       
          waitForAudioToFinish(audioElement);
     

          function mute(audioElement){
        audioElement.muted = true;
        audioElement.pause();
        }

          return d1.promise();
        
        }
   

        var d = new $.Deferred();
        var d1 = new $.Deferred();

        $("#BTNReminder").click(function () {
          var fired_button = $(this).val();


          $("#BTNReminder").on("click", function () {
            function countdown(fired_button) {
              var seconds = 5;
              var mins = 1;
              function tick() {
                var minutenCounter = document.getElementById("minutes");
                var current_minutes = mins - 1;
                seconds--;
                minutenCounter.innerHTML =
                  current_minutes.toString() +
                  ":" +
                  (seconds < 10 ? "0" : "") +
                  String(seconds);
                if (seconds > 0) {
                  setTimeout(tick, 1000);
                } else {
                  if (mins > 1) {
                    countdown(mins - 1);
                  }
                }
              }

              tick();
            }
            countdown(fired_button);


            function countdownZwei(fired_button) {
              var seconds = 5;
              var mins = 1;

              function tick() {
                var minutenCounter = document.getElementById("minutes");
                var current_minutes = mins - 1;
                seconds--;
                minutenCounter.innerHTML =
                  current_minutes.toString() +
                  ":" +
                  (seconds < 10 ? "0" : "") +
                  String(seconds);
                if (seconds > 0) {
                  setTimeout(tick, 1000);
                } else {
                  if (mins > 1) {
                    countdown(mins - 1);
                  }
                }
              }

              tick();
            }
            countdownZwei(fired_button);
            $(this).prop("disabled", true);
            $.when(countdownReal(fired_button)).then(function () {


              playSong("audio.mp3").then(function () {
                $(".BTNmajor").prop("disabled", false);
              });
            });
          });
        });
      });
    

    </script>

  </body>
</html>

Answer

I have solved the problem this way:

var audioElement = document.createElement("audio");
       
function playSong(src) {
     
            audioElement.setAttribute("autoplay", "autoplay");
            audioElement.setAttribute("src", src);
            audioElement.play();
            waitForAudioToFinish(audioElement);
            return d1.promise();
        
        }
   
   
$("#stopBTN").click(function () {

audioElement.pause()
});

Advertisement

Answer