how to resume the timer from where it was paused using jquery

Question

My Problem is when i press PAUSE btn & after few seconds again if i press the play button then then timer is starting from the beginning .` The timer should continue from the current pause time,if user clicks play button followed by pause button.

Please help me for this, i am trying to solve this issue since last 2 days. But still its not solved as per my app requirement.

function myApp() { 
  this.paused = false;
  this.paused = true // set pause to true (stop)
  this.isactive = false; // countdown is active
  return this.observer(); // call and return the "observer" method of the "myApp" class
}

myApp.prototype.observer = function() { // observer method
  var self = this; // set this to self (this is the current instance of this class)

  $('#btn_start').on('click', function(event){ // where an user click on "btn_start"
    event.preventDefault();
    self.play('mp3'); // call the play method and store the state in a public var
    self.countdown(30, self.onEnd); // 30 is the audio duration - second parameter is the callback when the audio is finished
    self.isactive = true;
  });
  return this; // return this instance
};

myApp.prototype.play = function() { // play method
  var song = document.getElementById('audiosource');
  if (this.paused === true)
  {
    console.log('play song');
    song.play();
    this.paused = false;
  }
  else
  {
    console.log('pause song');
    song.pause();
    this.paused = true;
  }
  return this;
};

myApp.prototype.countdown = function(duration, callback) { // countdown method
  var self = this, // class instance
       countdown = null, // countdown
       ctx = null; // setIntervall clearer
       timer = duration; // timer

  if (this.isactive === true) // if this method yet called
  {
    return false;
  }
  countdown = function() {
      console.log('start countdown:' + self.paused);
    if (timer === 0)
    {
       clearInterval(ctx);
       callback.call(this);
       return false;
    }
    if (self.paused === false) // if not in pause
    {
      timer -= 1;
      console.log(timer);
      $('#timer > span').html(timer);
    }
  };
  ctx = setInterval(countdown, 1000);
};

myApp.prototype.onEnd = function() {
  // when the audio is finish..
 alert ('end of the song');
};

 ;   $(function() {
  new myApp();
});

Answer 1

I would structure your app differently

<div id="app">
    <div id="timer">click play</div>
    <a href="#" id="btn_start">PLAY</a>
</div>

<audio id="audiosource">
    <source src="http://www.virtuagym.com/audio/en/get_ready.mp3" type="audio/mpeg" />
    <source src="http://www.soundjay.com/button/button-1.wav" type="audio/wav" />
</audio>


<audio  id="a_1" >
    <source src="http://www.virtuagym.com/audio/en/1.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/1.mp3" type="audio/mp3" />
</audio>
<audio  id="a_2" >
    <source src="http://www.virtuagym.com/audio/audio/en/2.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/audio/en/2.mp3" type="audio/mp3" />
</audio>
<audio   id="a_3" >
    <source src="http://www.virtuagym.com/audio/audio/en/3.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/audio/en/3.mp3" type="audio/mp3" />
</audio>
<audio id="a_4" >
    <source src="http://www.virtuagym.com/audio/audio/en/4.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/audio/en/4.mp3" type="audio/mp3" />
</audio>
<audio  id="a_5" >
    <source src="http://www.virtuagym.com/audio/audio/en/5.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/5.mp3" type="audio/mp3" />
</audio>

JS:

(function ($) {
    // function to play sounds, calls `done` when sounds are finished to play
    // here you should adjust timings for your audio
    var playGetReady = function (done) {
        var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
            playNext = function () {
                var id = ids.shift();
                document.getElementById(id).play();
                if (ids.length) {
                    setTimeout(playNext, 1000);
                } else {
                    done();
                }
            };
        playNext();
    };

    // constructor
    function App($el, startFrom) {
        this.$el = $el; // root element
        this.$timer = this.$('#timer'); // find element to render countdown to
        this.$button = this.$('#btn_start'); // play/pause button
        // $.proxy(fn, ctx); makes `ctx` to be referenced by `this` inside `fn`
        // sets handler on button
        this.$button.click($.proxy(this.buttonHandler, this));
        // sets value to start countdown
        this.set(startFrom);
        // we're not running yet
        this.intervalHandle = null;
    };

    // look for elements inside of root element
    App.prototype.$ = function () {
        return this.$el.find.apply(this.$el, arguments);
    };

    // called on play/pause button click
    App.prototype.buttonHandler = function (e) {
        e.preventDefault(); // prevent anchor default action
        this.toggle(); // toggle play/pause
    };

    App.prototype.start = function () {
        var self = this;
        playGetReady(function () { // play get ready sound
            // start countdown
            self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
            // change button text to PAUSE
            self.$button.text('PAUSE');
        });
    };

    App.prototype.stop = function () {
        // stop countdown
        clearInterval(this.intervalHandle);
        // set `intervalHandle` to null to be able to check whether
        // countdown is running or not
        this.intervalHandle = null;
        // change button text to PLAY
        this.$button.text('PLAY');
    };

    App.prototype.toggle = function () {
        // if running
        if (this.intervalHandle) {
            // then stop
            this.stop();
        // if not
        } else {
            // then start
            this.start();
        }
    };

    // sets new value for countdown
    App.prototype.set = function (timeLeft) {
        this.counter = timeLeft;
    };

    // called every second to update counter, rerender, call `end` callback
    // and play sound
    App.prototype.tick = function () {
        // update countdown
        this.counter -= 1;
        // push new countdown to page
        this.render();
        if (this.counter === 0) { // if countdown is finished
            this.stop(); // stop decreasing it
            this.end(); // end callback, ask for new value or terminate
        }
    };

    // pushed countdown to page
    App.prototype.render = function () {
        this.$timer.text(this.counter);
    };

    // on end callback
    App.prototype.end = function () {
        // ask for new countdown
        var text = prompt('end of the first exercise, NOw lets play the second exercise for your with another by loading its time');
        if (text) { // if user entered any
            var next = Number(text); // convert it to number
            this.set(next); // set new countdown value
            this.render(); // push changes to page
            this.start(); // start countdown
        } else { // if user entered nothing
            // do nothing
            this.$timer.text('You\'re done'); // tell user he finished
        }
    };

    $(function () {
        var app = new App($('#app'), 5); // create app
    });
})(jQuery);

Note, you should adjust timings in playGetReady according to your sounds. Also, only a_5 and a_1 are loading.

Hope it'll help. I'd also recommend you reading tutorial or book on JavaScript.

jsFiddle