jameshibbard/gist:5540481

## gistfile1.html
<!DOCTYPE HTML>
<html>
  <head>
    <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>
    <style>
      #count{
        color: blue;
        font-size:70px;
        padding:15px 0 0 30px;
      }
    </style>
  </head>

  <body>
    <button id="myButton">Start Countdown</button>
    <div id="count"></div>

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

      $("#myButton").on("click", function(){
        d = new $.Deferred();
        d1 = new $.Deferred();
        $(this).prop("disabled", true);
        $.when(countdown(5)).then(function() {
          $("#count").empty();
          playSong("clip.mp3")
          .then(function() { $("#myButton").prop("disabled", false); });
        })
      });
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<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>
	<style>
	#count{
	color: blue;
	font-size:70px;
	padding:15px 0 0 30px;
	}
	</style>
	</head>

	<body>
	<button id="myButton">Start Countdown</button>
	<div id="count"></div>

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

	$("#myButton").on("click", function(){
	d = new $.Deferred();
	d1 = new $.Deferred();
	$(this).prop("disabled", true);
	$.when(countdown(5)).then(function() {
	$("#count").empty();
	playSong("clip.mp3")
	.then(function() { $("#myButton").prop("disabled", false); });
	})
	});
	</script>
	</body>
	</html>