无法将音频文件控件与计时器控件同步

Question

我正在使用JQuery mobile进行PhoneGap项目。

当用户单击按钮时，他们会转到下一页，音频开始，并且计时器也应该启动。当音频结束并且计时器结束时，我将用户移至下一个屏幕。

我设法创建了计时器，但是即使用户单击暂停按钮，计时器也可以运行。这使用户转到下一页，并且音频文件仍在运行。

我想同步2个功能，即暂停和播放音频的功能与暂停和播放计时器的功能。

  var button = document.getElementById("button");
  var btn = document.getElementById("btn");
  var audio = document.getElementById("audio");
  var btnstop = document.getElementById("btnstop");
  
  //play-pause button

button.addEventListener("click", function(){

    if(audio.paused){
      audio.play();
      button.className = "pause-icon playpause-icon";
 //added here the pause for the timer
      timer.pause();


    } else {
      audio.pause();
      button.className = "play-icon playpause-icon";
 //added here the resume for the timer     
      timer.resume();

    }
  });

//button that sends user to the audio page

  btn.addEventListener("click", function(){

      audio.play();
      button.className = "pause-icon playpause-icon";
      var timer = new Timer(function() {
          window.location.hash = '#page3';
      }, 10000);


  });
  
  //button that skips the audio page altoghether

  btnstop.addEventListener("click", function(){

     audio.pause();
     audio.currentTime = 0;



  });

  //Timer for intro
  function Timer(callback, delay) {
      var timerId, start, remaining = delay;

      this.pause = function() {
          window.clearTimeout(timerId);
          remaining -= Date.now() - start;
      };

      this.resume = function() {
          start = Date.now();
          window.clearTimeout(timerId);
          timerId = window.setTimeout(callback, remaining);
      };

      this.resume();
  }