Spis treści

Co to jest metronom?

Metronom to urządzenie używane w muzyce do utrzymywania stałego tempa. Może być mechaniczny lub elektroniczny i wydaje regularne dźwięki (np. „kliknięcia”) w określonych odstępach czasu, które mierzy się w uderzeniach na minutę (BPM).
Muzycy korzystają z metronomu podczas ćwiczeń, aby grać równo i w rytmie. Na przykład 60 BPM oznacza jedno uderzenie na sekundę, a 120 BPM – dwa uderzenia na sekundę. Pierwszym znanym kompozytorem, który zaczął oznaczać tempo swoich utworów za pomocą metronomu, był Ludwig van Beethoven.

Metronom online

Jak ustawić metronom?

Ustawienie metronomu na różne tempa jest bardzo proste — wystarczy znać wartość BPM (beats per minute, czyli uderzenia na minutę), która odpowiada szybkości utworu. Oto jak to zrobić:

1. Ustaw liczbę uderzeń na takt – jeśli ćwiczysz utwór w metrum 4/4, ustaw 4 uderzenia na takt. Możesz też wybrać 3/4, 6/8 itd., w zależności od rytmu utworu.
2. Wybierz tempo – większość metronomów (zarówno fizycznych, jak i cyfrowych) pozwala ustawić tempo w zakresie od około 40 do 240 BPM. Na przykład:
  - 60 BPM = jedno uderzenie na sekundę (wolne tempo)
  - 120 BPM = dwa uderzenia na sekundę (średnie tempo)
  - 180 BPM = szybkie tempo
3. Akcent – pierwsze uderzenie taktu innym dźwiękiem, co pomaga w orientacji rytmicznej, tutaj są automatyczne.

Jak wstawić metronom na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca poniżej i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

1. index.html
2. metronom.js

Index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> 
<script src="metronom.js"></script>
<style>
.ghforkme {
    position: absolute;
    right: 0px;
    top: 0px;
}
HEADER {
    margin-bottom: 0.5rem;
}
FOOTER {
    text-align: right;
    font-size: small;
}
LABEL, BUTTON {
    font-size: 1.2rem;
    margin: 0.2rem;
    white-space: nowrap;
}
.play-button {
    width: 8rem;
}
[v-cloak] {
    display: none;
}
</style>
<title>Metronom</title>
</head>
<body>
<header>
  <h1>Metronom</h1>
</header>
<div id="app" v-cloak @mousedown.prevent>
  <metronome-view :intf="intf"></metronome-view>
  <metronome ref="metronome"
      :gain="gain" :tempo="tempo" :beat="beat" :mute="mute" :pause="pause"
      @start="metronome_startHandler"
      @stop="metronome_stopHandler"></metronome>
  <br/>
  &nbsp;
  <div><strong>TAKT</strong> </div>
  <template v-for="b in [0, 1, 2, 3, 4, 5, 6, 7]">
    <label>
      <input type="radio" name="beat" v-model="beat" :value="b" 
          @click="$refs.metronome.reset()" />
      {{b}}</label>
  </template>
  <br/>
  &nbsp;
  <div><strong>TEMPO</strong> - BPM (<em>Beats Per Minute, czyli uderzenia na minutę</em>)</div>
  <template v-for="t in [40, 60, 80, 100, 120, 140, 160, 180, 200, 220]">
    <label>
      <input type="radio" name="tempo" v-model="tempo" :value="t"
          @click="$refs.metronome.reset()" />
      {{t}}</label>
  </template>
  <br/>
  &nbsp;
  <div><strong>GŁOŚNOŚĆ</strong></div>
  <template v-for="g in [-50, -40, -30, -20, -10]">
    <label>
      <input type="radio" name="gain" v-model="gain" :value="g"
          />
      {{g}}</label>
  </template>
  <div>
    <label>
      <input type="checkbox" v-model="mute" />
      Wycisz</label>
  </div>
  <br/>
  &nbsp;
  <div>
    <button class="play-button" @click="start_clickHandler"
        > {{ playing? 'STOP' : 'START' }} </button>
  </div>
</div>
<script>

new Vue({
  el: '#app',
  data: {
    beat: 4, gain: -30, tempo: 120, mute: false, pause: false,
    playing: false, intf: null
  },
  methods: {
    start_clickHandler: function() {
      var metronome = this.$refs.metronome;
      if (!this.playing) {
        metronome.start();
      } else {
        metronome.stop();
      }
    },
    metronome_startHandler: function(intf) {
      this.playing = true;
      this.intf = intf;
    },
    metronome_stopHandler: function() {
      this.playing = false;
      this.intf = null;
    }
  }
});

  </script>
<footer><a href="https://skrip.pl/" title="Strona domowa" target="_blank">skrip</a></footer>
</body>
</html>

metronom.js

// JavaScript Document
// www.skrip.pl
//---------------------------------------------------------------------
//
// vue-metronome.js

'use strict'

!function() {

  var createPlayer = function() {
    return {
      audioContext: null,
      audioprocessHandler: function(event) {},
      stateHandler: function(type) {},
      start: function() {

        if (!this.audioContext) {

          var bufferSize = 8192;
          var numChannels = 1;
          var audioContext = new AudioContext();

          var gainNode = audioContext.createGain();
          gainNode.gain.value = 1;
          gainNode.connect(audioContext.destination);

          var scriptNode = audioContext.
            createScriptProcessor(bufferSize, 0, numChannels);

          scriptNode.onaudioprocess = function(event) {
            this.audioprocessHandler(event);
          }.bind(this);

          scriptNode.connect(gainNode);
          this.audioContext = audioContext;
          this.stateHandler('start');
        }
      },
      stop: function() {
        if (this.audioContext) {
          this.audioContext.close();
          this.audioContext = null;
          this.stateHandler('stop');
        }
      }
    };
  };

  var components = {
    metronome: {
      template: '<span style="display:none;">metronome</span>',
      props: {
        beat: { type: Number, default: 4 },
        tempo: { type: Number, default: 120 },
        gain: { type: Number, default: -40 },
        mute: { type: Boolean, default: false }
      },
      data: function() {
        return {
          player: null,
          reset: function() {}
        };
      },
      mounted: function() {

        var player = createPlayer();
        player.stateHandler = function(type) {

          if (type == 'start') {

            var freq, vol, step, lastStep = -1;
            var outputBuffer, i, bufLen, c, chData;

            var sine = function() {
              var v = 0;
              return function(n) {
                v += Math.cos(n);
                return v;
              }
            }();
            var square = function(n) {
              return Math.sin(n) < 0? -1 : 1;
            };
            var wave = square;

            var audioContext = player.audioContext;
            var sampleRate = audioContext.sampleRate;
            var t = 0;
            var dt = 1 / sampleRate;
            var gateT = 0;
            var clickGateTime = 1000 * dt;

            this.reset = function() {
              t = 0;
            };

            player.audioprocessHandler = function(event) {

              outputBuffer = event.outputBuffer;
              bufLen = outputBuffer.length;
              chData = outputBuffer.getChannelData(0);

              for (i = 0; i < bufLen; i += 1) {

                step = Math.floor(t * this.params.stepPerTime);

                if (lastStep != step) {
                  freq = step % this.params.beat == 0?
                      this.params.freq * 2 : this.params.freq;
                  vol = this.params.vol;
                  gateT = t + clickGateTime;
                  lastStep = step;
                } else if (vol > 0 && t > gateT) {
                  vol = 0;
                }

                chData[i] = vol * wave(2 * Math.PI * freq * t);
                t += dt;
              }

            }.bind(this);

            var _this = this;
            this.$emit('start', {
              getTimestamp: function() { return t; },
              getBeat: function() { return _this.params.beat; },
              getTempo: function() { return _this.params.tempo; }
            });

          } else if (type == 'stop') {
            this.$emit('stop');
          }
        }.bind(this);
        this.player = player;
      },
      computed: {
        params: function() {
          var beat = this.beat;
          var tempo =  this.tempo;
          var mute = this.mute;
          var freq = 440 * Math.exp(/* E note */ 7 / 12 * Math.log(2) );
          var vol = mute? 0 : Math.exp(this.gain / 20 * Math.log(10) );
          var stepPerTime = tempo / 60;
          return {
            beat: beat, tempo: tempo, freq: freq, vol: vol,
            stepPerTime: stepPerTime
          };
        }
      },
      methods: {
        start: function() {
          this.player.start();
        },
        stop: function() {
          this.player.stop();
        }
      }
    },
    metronomeView: {
      template:
        '<svg xmlns="http://www.w3.org/2000/svg"' +
            ' style="overflow: hidden;"' +
            ' width="220" height="90"' +
            ' viewBox="0 0 220 90" >' +
          '<clipPath id="dspFrm">'+
            '<rect fill="#000" stroke="none"' +
            ' x="2" y="2" width="216" height="86" />' +
          '</clipPath>' +
          '<rect fill="#230" stroke="none" opacity="0.2"' +
          ' x="0" y="0" width="220" height="90" rx="8" ry="8" />' +
          '<g clip-path="url(#dspFrm)">' +
            '<circle ref="lPoint" fill="#000" stroke="none" :opacity="lOp"' +
              ' :cx="pHGap" :cy="pVGap" :r="pRadius" />' +
            '<circle ref="rPoint" fill="#000" stroke="none" :opacity="rOp"' +
              ' :cx="220 - pHGap" :cy="pVGap" :r="pRadius" />' +
            '<g v-for="bar in bars" :transform="bar.tran">' +
              '<path ref="bars" fill="#000" stroke="none" :opacity="bar.op"' +
                ' d="M-0.5 -18L-5 -84L0 -88L5 -84L0.5 -18Z" />' +
            '</g>' +
            '<circle ref="barAx" fill="#000" stroke="none" :opacity="cOp"' +
              ' cx="110" cy="90" r="12" />' +
          '</g>' +
        '</svg>',
      props: {
        intf: { type: Object, default: null }
      },
      data: function() {
        return {
          pHGap: 24, pVGap: 22, pRadius: 18,
          active: false, cOp: '0', lOp: '0', rOp: '0', bars: []
        };
      },
      mounted: function() {

        var activeOpacity = '1';
        var defaultOpacity = '0.02';

        this.cOp = this.lOp = this.rOp = defaultOpacity;

        var bars = [];
        !function() {
          var l = 5;
          for (var i = -l; i <= l; i += 1) {
            bars.push({
              n: i,
              tran: 'translate(110 95) rotate(' +
                ( (i + Math.sin(i * 0.06) ) * 8.5) + ')',
              op: defaultOpacity
            });
          }
        }();
        this.bars = bars;

        var beat, tempo;

        var frmT0 = 0, lastTs = 0, t, ts;
        var tranT, i, op;
        var cOp, lOp, rOp;
        var intf, bi0, bi1;
        var _barsLen = bars.length;
        var _2barsLen = _barsLen * 2;

        var onframe = function(frmT) {

          if (this.intf) {

            intf = this.intf;
            ts = intf.getTimestamp();
            beat = intf.getBeat();
            tempo = intf.getTempo();

            if (lastTs != ts) {
              frmT0 = frmT;
              lastTs = ts;
            }

            t =  ts + (frmT - frmT0) / 1000;
            tranT = (t * tempo / 120 + 0.75) % 1;

            cOp = activeOpacity;
            if (tranT < 0.5) {
              lOp = activeOpacity;
              rOp = defaultOpacity;
            } else {
              lOp = defaultOpacity;
              rOp = activeOpacity;
            }

            if (this.cOp !== cOp) this.cOp = cOp;
            if (this.lOp !== lOp) this.lOp = lOp;
            if (this.rOp !== rOp) this.rOp = rOp;

            bi0 = Math.floor(tranT * _2barsLen);
            bi1 = (bi0 + _2barsLen - 1) % _2barsLen;
            bi0 = bi0 >= _barsLen? _2barsLen - 1  - bi0 : bi0;
            bi1 = bi1 >= _barsLen? _2barsLen - 1  - bi1 : bi1;

            for (i = 0; i < _barsLen; i += 1) {
              op = (i == bi0 || i == bi1)? activeOpacity : defaultOpacity;
              if (bars[i].op !== op) {
                bars[i].op = op;
              };
            }

          } else {
            this.cOp = this.lOp = this.rOp = defaultOpacity;
            for (i = 0; i < bars.length; i += 1) {
              bars[i].op = defaultOpacity;
            }
          }

          if (this.active) {
            window.requestAnimationFrame(onframe);
          }
        }.bind(this);

        this.active = true;
        window.requestAnimationFrame(onframe);
      },
      beforeDestroy: function() {
        this.active = false;
      }
    }
  };

  for (var k in components) {
    Vue.component(k, components[k]);
  }
}();

Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Metronom online do wstawienia na własną stronę

Pierwszym znanym kompozytorem, który zaczął oznaczać tempo swoich utworów za pomocą metronomu, był Ludwig van Beethoven.

Co to jest metronom?

Metronom online

Jak ustawić metronom?

Jak wstawić metronom na własną stronę?

Index.html

metronom.js

Gotowe pliki gadżetu do pobrania

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Co to jest metronom?

Metronom online

Jak ustawić metronom?

Jak wstawić metronom na własną stronę?

Index.html

metronom.js

Gotowe pliki gadżetu do pobrania

Może Ci się spodobać:

Prosty Kalkulator BMI

Saper (Minesweeper) – gra online

Stara, bazarowa gra w Trzy Kubki

Kółko i krzyżyk v.3 – gra online