view source

JavaScript

document.title = 'メトロノーム'
$(function(){
  var a = new Audio('/mp3/pi.mp3');
  var timer;
  var play = function(){
    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();
      $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);


  $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);

});
/*
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
*/

CSS


@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 a img{
  width:240px;
  height:240px;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。