tp-midi-clock.html

<link rel="import" href="../polymer/polymer.html">

<!--
`tp-midi-clock`


@demo demo/index.html 
-->

<dom-module id="tp-midi-clock">
  <template>
    <style>
      :host {
        display: [[display]];
      }
    </style>
    <div>
      <!-- FIXME: Have a nice design -->
      <button style="width: 32px; height:32px;" id='stopbutton'>⬜</button>
      <button style="width: 32px; height:32px;" id='startbutton'>▷</button>
    </div>
  </template>

  <script>
    Polymer({

      is: 'tp-midi-clock',

      properties: {
        /* Provides web audio functionality. */
        audioContext: {
          type: Object,
          value: null,
        },
        /* Used in style display. Would be 'block' or 'none' for usual cases. */
        display: {
          type: String,
          value: 'block',
        },
        /* Specifies tempo, beats in a minute. Can be changed dynamically. */
        tempo: {
          type: Number,
          value: 120,
          observer: '_tempoChanged',
        },
        /* Specifies beats. Cannot be changed dynamically now. */
        beat: {
          type: Number,
          value: 4,
        },
        /* Specifies time resolution for each beat. Cannot be chaned dynamically now.*/
        resolution: {
          type: Number,
          value: 24,
        },
        /* Generate click sounds if true is given. */
        click: {
          type: Boolean,
          value: true,
        },
        /**
         * Specifies measures that are counted before starting actual clock.
         * Cannot be changed dynamically.
         */
        countdown: {
          type: Number,
          value: 2,
        },
      },

      _starttime: 0,
      _tickduration: 0,
      _running: false,
      _lastclick: 0,
      _ctx: null,
      _oscH: null,
      _gainH: null,
      _oscL: null,
      _gainL: null,
      _inputIdx: 0,
      _outputIdx: 0,

      _animation: function () {
        // FIXME: would have a nice UI to display current MIDI time.
        // console.log(this.convertTimeStampToMidiTime(performance.now()));
        if (this._running)
          window.requestAnimationFrame(this._animation.bind(this));
      },

      _timer: function () {
        if (!this._running)
          return;
        var now = performance.now();
        var delta = now - this._starttime;
        var tick = (delta / this._tickduration) | 0;
        if (tick > this._lastclick) {
          var resolution = this.get('resolution');
          this._lastclick = tick - (tick % resolution) + resolution;
          var timestamp =
              this._starttime + this._lastclick * this._tickduration;
          var audiotime =
              this._ctx.currentTime + (timestamp - now) / 1000;
          if (this.get('click')) {
            if (resolution !=
                (this._lastclick % (resolution * this.get('beat')))) {
              this._gainL.gain.setValueAtTime(1, audiotime);
              this._gainL.gain.linearRampToValueAtTime(0, audiotime + 0.05);
            } else {
              this._gainH.gain.setValueAtTime(1, audiotime);
              this._gainH.gain.linearRampToValueAtTime(0, audiotime + 0.05);
            }
          }
        }
        // FIXME: Adjust timer interval to follow tempo in minimum cost.
        setTimeout(this._timer.bind(this), 10);
      },

      _tempoChanged: function () {
        var timestamp = performance.now();
        var time = this.convertTimeStampToMidiTime(timestamp);
        time.measure += this.get('countdown');
        var tick = this.convertMidiTimeToTick(time);
        var beatduration = 60 * 1000 / this.get('tempo');
        this._tickduration = beatduration / this.get('resolution');
        this._starttime = timestamp - tick * this._tickduration;
      },

      attached: function () {
        this.$.startbutton.addEventListener('click', function (e) {
          this.start();
        }.bind(this), false);
        this.$.stopbutton.addEventListener('click', function (e) {
          this.stop();
        }.bind(this), false);
      },

      /* Starts clocking. */
      start: function () {
        this.stop();
        this._starttime = performance.now() + 10;
        var beatduration = 60 * 1000 / this.get('tempo');
        this._tickduration = beatduration / this.get('resolution');

        this._running = true;
        if (this.get('display') != 'none')
          window.requestAnimationFrame(this._animation.bind(this));

        if (this.get('click')) {
          this._ctx = this.get('audioContext');
          if (!this._ctx)
            this._ctx = new AudioContext();
          this._oscH = this._ctx.createOscillator();
          this._oscH.frequency.value = 1200;
          this._gainH = this._ctx.createGain();
          this._gainH.gain.value = 0;
          this._oscH.connect(this._gainH).connect(this._ctx.destination);
          this._oscH.start();

          this._oscL = this._ctx.createOscillator();
          this._oscL.frequency.value = 600;
          this._gainL = this._ctx.createGain();
          this._gainL.gain.value = 0;
          this._oscL.connect(this._gainL).connect(this._ctx.destination);
          this._oscL.start();

          this._lastclick = -24;
          this._timer();
        }
      },

      /* Stops clocking. */
      stop: function () {
        this._running = false;
        this._oscL && this._oscL.stop();
        this._oscH && this._oscH.stop();
      },

      /**
       * Converts DOMHighResTimeStamp to MidiTime.
       * @param {DOMHighResTimeStamp} timestamp
       * @return {MidiTime}
       */
      convertTimeStampToMidiTime: function (timestamp) {
        var delta = timestamp - this._starttime;
        var totaltick = (delta / this._tickduration) | 0;
        return this.convertTickToMidiTime(totaltick);
      },

      /**
       * Converts MidiTime to DOMHighResTimeStamp.
       * @param {MidiTime} time
       * @param {DOMHighResTimeStamp}
       */
      convertMidiTimeToTimeStamp: function (time) {
        var tick = this.convertMidiTimeToTick(time);
        return this._starttime + tick * this._tickduration;
      },

      /**
       * Converts tick count to MidiTime.
       * @param {number} tick
       * @return {MidiTime}
       */
      convertTickToMidiTime: function (tick) {
        var result = {
          measure: 0,
          beat: 0,
          tick: 0
        };
        result.tick = tick % this.get('resolution');
        tick = (tick - result.tick) / this.get('resolution');
        result.beat = tick % this.get('beat');
        result.measure = (tick - result.beat) / this.get('beat');
        result.measure -= this.get('countdown');
        return result;
      },

      /**
       * Converts MidiTime to tick count.
       * @param {MidiTime} time
       * @return {number}
       */
      convertMidiTimeToTick: function (time) {
        var beat = time.measure * this.get('beat') + time.beat;
        return beat * this.get('resolution') + time.tick;
      },

      /**
       * Calculates duratoin tick count between |from| and |to|.
       * @param {MidiTime} from
       * @param {MidiTime} to
       * @return {number}
       */
      duration: function (from, to) {
        var start = this.convertMidiTimeToTick(from);
        var end = this.convertMidiTimeToTick(to);
        return end - start;
      },

      /**
       * Calculates note off MidiTime from note on MidiTime and duration tick.
       * @param {MidiTime} time
       * @param {number} tick
       * @return {MidiTime}
       */
      calculateNoteOffMidiTime: function (time, tick) {
        var endtick = this.convertMidiTimeToTick(time) + tick;
        var offset =
            this.get('countdown') * this.get('beat') * this.get('resolution');
        return this.convertTickToMidiTime(endtick + offset);
      }
    });
  </script>
</dom-module>