我的应用看起来像这样:
Here is the fiddle what I tried。我想在当前运动计时器结束时自动播放下一个运动时间但是目前在这个小提琴中它要求点击播放按钮以启动新的运动计时器。
另外,我想在第一个音频即音频资源之后播放5个声音计数(1,2,3,4,5)。
这是我的代码:
function myApp($tier) {
this.paused = false;
this.paused = true // set pause to true (stop)
this.isactive = false; // countdown is active
this.timer = $tier;
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.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'); $("#btn_start").addClass('btn-pause');
song.play();
this.paused = false;
}
else
{
console.log('pause song');$("#btn_start").removeClass('btn-pause');
song.pause();
this.paused = true;
}
return this;
};
myApp.prototype.countdown = function(callback) { // countdown method
var self = this, // class instance
countdown = null, // countdown
ctx = null; // setIntervall clearer
if (this.isactive === true) // if this method yet called
{
return false;
}
countdown = function() {
console.log('start countdown:' + self.paused);
if (self.timer === 0)
{
clearInterval(ctx);
callback.call(this);
return false;
}
if (self.paused === false) // if not in pause
{
self.timer -= 1;
console.log(self.timer);
var msec=rectime(self.timer);
$('#timer > span').html(msec);
}
};
ctx = setInterval(countdown, 1000);
};
myApp.prototype.onEnd = function() {
// when the audio is finish..
$("#btn_start").removeClass('btn-pause');
alert ('end of the first exercise, NOw lets play the second exercise for your with another by loading its time');
new myApp('10');
$('#timer > span').html(rectime('10'));
};
$(function() {
new myApp('4');
$('#timer > span').html(rectime('4'));
});
function rectime(secs) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = secs - (hr * 3600) - (min * 60);
while (min.length < 2) {min = '0' + min;}
while (sec.length < 2) {sec = '0' + min;}
if (hr) hr += ':';
return hr + min + ':' + sec;
}