0

我的应用程序如下所示：

这是我试过的小提琴。我想在当前锻炼计时器结束时自动播放下一个锻炼时间但目前在这个小提琴中它要求单击播放按钮以启动新的锻炼计时器。

另外，我想在第一个音频即 audiosource 之后播放 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;
 }
4

0 回答 0