SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Count Down and Make sound play, on click

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

    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 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. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    No problemo!

    Here's the revised code:

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •