Count Down and Make sound play, on click

JavaScript
1

I am trying to get a countdown to work and at the end of the countdown, a sound play. The coount down will start when a button is clicked. Below is my code, any help would be much appreciated!

Here is the Javascript:

function destroyMe(event){

		(function(){
	  var counter = 10;

	  setInterval(function() {
		counter--;
		if (counter >= 0) {
		  span = document.getElementById("count");
		  span.innerHTML = counter;
		}
		// Display 'counter' wherever you want to display it.
		if (counter === 0) {
			alert('Count Down Is Complete');
			clearInterval(counter);
			var snd=new Audio(event);
			snd.play();
		}


	});
	});

	}

here is the html:

<div id=“wrapper”>
<button onClick=“destroyMe(‘meat-tornado.mp3’)”>Destroy Me</button> <br />

<span id=“count”>
</span>

</div>

Thanks!

2

Hi there,

If you don’t mind using jQuery, you can do it like this:

<!DOCTYPE HTML>
<html>
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?1055755-Count-Down-and-Make-sound-play-on-click-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Play sound after countdown</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <button id="myButton">Start Countdown</button> <br /> 
    <span id="count"></span>
    
    <script>
      function countdown(number){  
        $("#count").html(number);
        if (number === 0){
          d.resolve();  
        } else {
          number -= 1;
          window.setTimeout(function() {
            countdown(number);
          }, 1000);
        }
        return d.promise();
      }
      
      function playSong(src){
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', src);
        audioElement.setAttribute('autoplay', 'autoplay');
        audioElement.play();
      }
      
      var d = new $.Deferred();
      
      $("#myButton").on("click", function(){
        $.when(countdown(10)).then(function() { 
          playSong("audio.mp3");
        });
      });
    </script>
  </body>
</html>

I’ve made a little demo for you here.

There is a short delay between the counter reaching zero and the song starting. This is owing to whitespace at the beginning of the track.

Hope that helps.

3

yes that works, Thanks so much! Is there a way to restrict the button to being hit once? Right now you can hit it multiple times and it kinda goes funky. Thanks again!!

4

No problemo!

Here’s the revised code:

<!DOCTYPE HTML>
<html>
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?1055755-Count-Down-and-Make-sound-play-on-click-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Play sound after countdown</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <button id="myButton">Start Countdown</button> <br /> 
    <span id="count"></span>
    
    <script>
      function countdown(number){  
        $("#count").html(number);
        if (number === 0){
          d.resolve();  
        } else {
          number -= 1;
          window.setTimeout(function() {
            countdown(number);
          }, 1000);
        }
        return d.promise();
      }
      
      function waitForAudioToFinish(audioElement){
        if (!audioElement.paused){
          setTimeout(function(){
            waitForAudioToFinish(audioElement)
          }, 500);
        } else {
          d1.resolve();
        }
      }
      
      function playSong(src){
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', src);
        audioElement.setAttribute('autoplay', 'autoplay');
        audioElement.play();
        waitForAudioToFinish(audioElement);
        return d1.promise();
      }
      
      var d = new $.Deferred();
      var d1 = new $.Deferred();
      
      $("#myButton").on("click", function(){
        $(this).prop("disabled", true);
        $.when(countdown(10)).then(function() { 
          playSong("audio.mp3")
          .then(function() { $("#myButton").prop("disabled", false) });
        })
      });
    </script>
  </body>
</html>

I also updated the demo.
I made it so that the button is disabled whilst the song is playing, then it re-enables itself once the song is finished.