楽器の練習用アプリ #JavaScript

音程を維持しつつ再生速度を変えつつ楽器を持つ間を設ける
<!DOCTYPE html>
<html>
<head>
<style>
.rate,
.count{
  width: 300px;
}
</style>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>楽器のおとも</h1>

<div>
  <h3>音声ファイル</h3>
  <input type="file"/>
</div>
<div>
  <h3>再生速度</h3>
  <input class="rate" type="range" min=".5" max="1.5" step=".1" value="1">
  <span class="dispRate"></span>倍速
</div>
<div>
  <h3>再生開始までの秒数</h3>
  <input class="count" type="range" min="1" max="10" step="1" value="5">
  <span class="dispCount"></span>秒
</div>
<div>
  <button class="start">再生</button>
  <button class="stop">停止</button>
</div>
<script>

var player = {
  src: '',
  audio: '',
  count: 1,
  currentCount: 1,
  rate: 1,
  cancelDelay: '',
  watchCb: [],
  setCount: function( count ){
    this.execWatchCb('count', this.count = count);
    this.setCurrentCount( count );
  },
  setRate: function( rate ){
    this.execWatchCb('rate', this.rate = rate);
    if( this.audio ){
      this.audio.playbackRate = this.rate;
    }
  },
  setSrc: function( src ){
    this.execWatchCb('src', this.src = src);
  },
  setCurrentCount: function( count ){
    this.execWatchCb('currentCount', this.currentCount = count);
  },
  play: function(){
    if( !this.src ) return false;
    this.stop();
    this.audio = new Audio( this.src );
    var count = player.count * 1000;
    this.cancelDelay = delay(
      function(){
        if( player.audio ){
          player.audio.playbackRate = player.rate;
          player.audio.play();
        }
      },
      count,
      function( elapsedTime ){
        player.setCurrentCount( Math.floor((count - elapsedTime)/1000) );
      }
    );
  },
  stop: function(){
    if( this.cancelDelay ){
      this.cancelDelay();
    }
    if( this.audio ){
      this.audio.pause();
    }
  },
  watch: function( cb ){
    this.watchCb.push( cb );
  },
  execWatchCb: function( name, value){
    var o = this;
    setTimeout(function(){
      o.watchCb.forEach(function( cb ){
        cb(name, value);
      });
    },0)
  }
};


var el = {
  fileSelector: document.querySelector('[type="file"]'),
  start: document.querySelector('.start'),
  stop: document.querySelector('.stop'),
  rate: document.querySelector('.rate'),
  dispRate: document.querySelector('.dispRate'),
  count: document.querySelector('.count'),
  dispCount: document.querySelector('.dispCount')
};

el.fileSelector.addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (!(file instanceof File)) {
        window.alert('Please upload file.');
    } else if (file.type.indexOf('audio') === -1) {
        window.alert('Please upload audio file.');
    } else {
      player.setSrc( window.URL.createObjectURL(file) );
    }
}, false);


player.watch(function(name, value){
  if( name === 'currentCount'){
    el.count.value = value;
    el.dispCount.textContent = value;
  }
  else if( name === 'rate'){
    el.rate.value = value;
    el.dispRate.textContent = value;
  }
});

player.setCount(5);
player.setRate(.8);

el.start.addEventListener('click', function(){
  player.play();
});

el.stop.addEventListener('click', function(){
  player.stop();
});

el.rate.addEventListener('change', function(){
  player.setRate( this.value );
});

el.count.addEventListener('change', function(){
  player.setCount( this.value );
});

function delay(cb, delayTime, everyTimeCb){
  var cancel = false;
  delayTime = delayTime || 0;
  (function(){
    var baseTime;
    var raf = window.requestAnimationFrame;
    raf(function(now){
      baseTime = baseTime || now;
      var elapsedTime = now - baseTime;
      if(elapsedTime >= delayTime){
        cb(now);
      }
      else{
        everyTimeCb( elapsedTime );
        cancel || raf(arguments.callee);
      }
    });
  })();
  return function(){
    cancel = true;
  };
};

</script>
</body>
</html>