title: Stop AudioElement onClick
body: <p>I hope, you can help me. I am now stuck at this problem for several Days and can't solve it.
  With the <code>BTNReminder</code> Button I set a Timer. When the time's up the <code>AudioElement</code> play the sond i set. Now i Try to Stop the Sound but i am not able to Catch the <code>AudioElement</code>. 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 <code>audioElement.pause();</code></p>
  <p>Is this possible?
  Did I make somwhere a Mistake?</p>
  <p>Pleas Help :-/</p>
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;de&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Major Support&lt;/title&gt;
      &lt;script
        src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;
        type=&quot;text/javascript&quot;
      &gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
  
        &lt;div class=&quot;buttonWrapperDiv&quot;&gt;
          &lt;h3 id=&quot;minutes&quot;&gt;00:00&lt;/h3&gt;
          &lt;span id=&quot;count&quot;&gt;&lt;/span&gt;
          &lt;button id=&quot;stopBTNtwo&quot;&gt;STOP&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;btnWrapper&quot;&gt;
          &lt;button id=&quot;BTNReminder&quot; value=&quot;5&quot;&gt;5 seconds&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <pre><code>
      &lt;script&gt;
  
  $(function () {
          function countdownReal(number) {
  
            $(&quot;#&quot;).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(&quot;audio&quot;);
                audioElement.setAttribute(&quot;autoplay&quot;, &quot;autoplay&quot;);
            audioElement.setAttribute(&quot;id&quot;, &quot;beepbeep&quot;);
            audioElement.setAttribute(&quot;value&quot;, &quot;test&quot;);
            audioElement.setAttribute(&quot;src&quot;, src);
            audioElement.play();
         
            waitForAudioToFinish(audioElement);
       
  
            function mute(audioElement){
          audioElement.muted = true;
          audioElement.pause();
          }
  
            return d1.promise();
          
          }
     
  
          var d = new $.Deferred();
          var d1 = new $.Deferred();
  
          $(&quot;#BTNReminder&quot;).click(function () {
            var fired_button = $(this).val();
  
  
            $(&quot;#BTNReminder&quot;).on(&quot;click&quot;, function () {
              function countdown(fired_button) {
                var seconds = 5;
                var mins = 1;
                function tick() {
                  var minutenCounter = document.getElementById(&quot;minutes&quot;);
                  var current_minutes = mins - 1;
                  seconds--;
                  minutenCounter.innerHTML =
                    current_minutes.toString() +
                    &quot;:&quot; +
                    (seconds &lt; 10 ? &quot;0&quot; : &quot;&quot;) +
                    String(seconds);
                  if (seconds &gt; 0) {
                    setTimeout(tick, 1000);
                  } else {
                    if (mins &gt; 1) {
                      countdown(mins - 1);
                    }
                  }
                }
  
                tick();
              }
              countdown(fired_button);
  
  
              function countdownZwei(fired_button) {
                var seconds = 5;
                var mins = 1;
  
                function tick() {
                  var minutenCounter = document.getElementById(&quot;minutes&quot;);
                  var current_minutes = mins - 1;
                  seconds--;
                  minutenCounter.innerHTML =
                    current_minutes.toString() +
                    &quot;:&quot; +
                    (seconds &lt; 10 ? &quot;0&quot; : &quot;&quot;) +
                    String(seconds);
                  if (seconds &gt; 0) {
                    setTimeout(tick, 1000);
                  } else {
                    if (mins &gt; 1) {
                      countdown(mins - 1);
                    }
                  }
                }
  
                tick();
              }
              countdownZwei(fired_button);
              $(this).prop(&quot;disabled&quot;, true);
              $.when(countdownReal(fired_button)).then(function () {
  
  
                playSong(&quot;audio.mp3&quot;).then(function () {
                  $(&quot;.BTNmajor&quot;).prop(&quot;disabled&quot;, false);
                });
              });
            });
          });
        });
      
  
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>