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,355
    Mentioned
    179 Post(s)
    Tagged
    9 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,355
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •