jquery를 사용하여 타이머를 다시 시작하는 방법

Question

내 문제는 몇 초 후에 PAUSE btn &을 누르면 문제가 발생합니다. 재생 버튼을 누른 다음 타이머가 처음부터 시작됩니다. '타이머는 현재 일시 중지 시간, 사용자가 재생 버튼을 클릭 한 다음 일시 중지 버튼을 클릭 한 경우.

이 문제를 해결하는 데 도움을 주시기 바랍니다. 지난 2 일이 문제를 해결하기 위해 노력하고 있습니다. 하지만 여전히 내 애플 리케이션 요구 사항에 따라 해결되지.

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 앱을 다르게

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

주, 당신은 당신의 소리에 따라 playGetReady에 타이밍을 조정해야합니다. 또한 a_5 및 a_1 만로드 중입니다.

도움이 될 것입니다. 나는 또한 튜토리얼이나 자바 스크립트에 대한 책을 읽는 것이 좋습니다.

jsFiddle

Answer 2

시간 표시기를 어딘가에 저장해야하며 재생을 다시 누르면 시간 표시기에서 다시 시작됩니다. 방금 ​​timeleft var를 추가했습니다.

function myApp() { 

this.timeleft = 30; 

    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(self.timeleft, 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); 
     self.timeleft = 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(); 
});