我的问题是当我按下PAUSE btn＆amp;如果按下播放按钮再过几秒钟，那么计时器就会从头开始。“如果用户点击播放按钮后跟暂停按钮，计时器应该从当前的暂停时间继续。
请帮助我，我试着解决这个问题，因为最近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();
});
答案 0 :(得分：1)
我会以不同方式构建您的应用
<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。
希望它会有所帮助。我还建议您阅读有关JavaScript的教程或书籍。
答案 1 :(得分：0)
你必须将时间存储在某个地方，再次按下播放时，你将从timeleft恢复。 我刚刚添加了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();
});