document.title = 'メトロノーム'
$(function(){
  var a = new Audio('/mp3/pi.mp3');
  var timer;
  var count=0;
  var play = function(){
    count=0;
    var bpm = $bpm.val();
    bpm = Number(bpm);
    var min = 60*1000;
    var t = min / bpm;
    console.log(t);
    timer = setInterval(function(){
      a.currentTime = 0;
      a.play();
      count++;
      $count.text(count);
      $btn.append($i.clone());
      setTimeout(function(){
        $btn.find('i').remove();
      },99)
    }, t);
  }
  var $h1 = $('<h1>').text(document.title);
  var $form = $('<form>');
  var $imgPlay = $('<img>',{src:'play.svg'});
  var $imgPause = $('<img>',{src:'pause.svg'});
  var bpm = 80;
  var $i = $('<i>');
  var $btn = $('<a>',{id:'btn'}).append($imgPlay.clone()).append($i.clone());
  var $bpm = $('<input>',{min:40,max:208,type:'range'}).val(bpm);
  var $input = $('<input>',{min:40,max:208,type:'number',title:'BPM'}).val(bpm);
  var $count = $('<p>').text(0);


  $btn.on('click', function(){
    if($(this).hasClass('play')){
      clearInterval(timer);
      $(this).empty();
      $(this).append($imgPlay.clone());
      $(this).removeClass('play');
    } else {
      play();
      $(this).empty();
      $(this).append($imgPause.clone());
      $(this).addClass('play');
    }
  });
  $bpm.on('change', function(){
    var bpm = $(this).val();
    $input.val(bpm);
    if($btn.hasClass('play')){
      clearInterval(timer);
      play();
    }
  });
  $input.on('change', function(){
     $bpm.val($(this).val()).trigger('change');
  });
  $('#demo')
    .append($h1)
    .append($form);
  $form
    .append($input)
    .append($bpm)
    .append($btn)
    .append($count);

});
/*
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%88%E3%83%AD%E3%83%8E%E3%83%BC%E3%83%A0
メトロノーム（拍節器[1]、拍子計[1]、ドイツ語: Metronom、イタリア語: Metronomo、英語: metronome）は、一定の間隔で音を刻み、楽器を演奏あるいは練習する際にテンポを合わせるために使う音楽用具である。

一般的な機械式メトロノームの目盛りはほぼ等比的で、次のようになっている。

40 - （2刻み）- 60
60 - （3刻み）- 72
72 - （4刻み）- 120
120 -（6刻み）- 144
144 -（8刻み）- 208
*/

@keyframes heartbeat {
  25% {
    transform:scale(1.05);
    opacity:0.4;
  }
  50% {
    transform:scale(1.1);
    opacity:0.7;
  }
  75% {
    opacity:0.3;
    transform:scale(1.02);
  }
  100% {
    transform:scale(1);
    opacity:0;
  }
}

form{
  display:block;
  text-align:center;
}
label{
  display:block;
  width:98%;
  height:10vmin;
  font-size:80px;
}
input[type="number"]{
  width:200px;
  height:100px;
  font-size:100px;
  margin:0 auto;
  border:0;
  text-align:center;
}
input[type="range"]{
  display:block;
  width:90%;
  height:100px;
  margin:0 auto;
}

#demo a{
  display:block;
  width:240px;
  height:240px;
  position:relative;
  top:0;
  left:0;
  font-size:80px;
  cursor:pointer;
  border-radius:50%;
  margin:0 auto;
}

#demo i{
  box-sizing: content-box;
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  border-radius:50%;
  background-color:rgb(254,89,32);
  animation-name:heartbeat;
  animation-delay: 0s;
  animation-duration: 0.1s;
  animation-iteration-count:1;
  transform-origin: 50% 50%;
  opacity:0;
}
#demo p{
  padding:24px;
}

#demo a img{
  width:240px;
  height:240px;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-audio-tempo-metronome-bpm/